logo
down
shadow

VueJS Form Input Binding


VueJS Form Input Binding

Content Index :

VueJS Form Input Binding
Tag : javascript , By : BinaryBoy
Date : November 24 2020, 03:01 PM

seems to work fine Your problems seems to be that was missing :value="..". Also permissionsSelected should be an array: permissionsSelected: []
I would recommend you not to mix laravel blade @foreach with vue.
<div id="app">
  <ul>
    <li class="list-group-item bold" v-for="permission in permissions">
      <input
        type="checkbox"
        :id="permission.id"
        :value="permission.id"
        v-model="permissionsSelected"
      >
      <label :for="permission.id">@{{ permission.display_name }}
        <em>@{{ permission.description }}</em>
      </label>
    </li>
  </ul>
  <input type="hidden" name="permissions" :value="permissionsSelected">
</div>

<script>
  var permissions = JSON.parse("{{ json_encode($permissions) }}");

  var app = new Vue({
    el: '#app',
    data: {
      permissions: permissions,
      permissionsSelected: [],
    }
  });
</script>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Vuejs Input Binding Based on Computed Property


Tag : javascript , By : user142345
Date : March 29 2020, 07:55 AM
Hope this helps You can make use of a computed setter as follows:
computed: {
    lastName: {
        get(){
            //perform your logic
            return 'value.second'
        },
        set(newValue){
            this.value.second = newValue;
        }

    } 
  }     
<input type="text" v-model="lastName" placeholder="Enter last name" />

VueJS Input Binding with Nested Data


Tag : javascript , By : Martin
Date : March 29 2020, 07:55 AM
it should still fix some issue Since your fields.three is an object and not a scalar value, you can not bind it to your input. One thing you can do is to create a function that checks if fields.one, fields.two and fields.three are each simple objects or have nested object.
You can use this function:
det (param) {
    let strlen = param.length
        if(1 === strlen){
    return param
  }
  let split = param.split('.')

  let details = JSON.parse(JSON.stringify(this.details))
  for (var key in details) {
    if(key == split[0]){
      for (var key2 in details[key]) {
       return details[key][key2]
      }
    }
  }
}

vuejs b-form-input not binding value


Tag : javascript , By : mgz
Date : March 29 2020, 07:55 AM
seems to work fine You can't use v-model and value at the same time. V-model is a combination of value and @input. If you use value you must use @change or @input to change the value and delete the v-model. OR, only use v-model.

Vuejs Dynamic input binding & computed is not a function


Tag : javascript , By : Bado
Date : March 29 2020, 07:55 AM
This might help you You need to use Vue.set instead of index [] for object updates to be reactive.
Instead of:
this.form[`comp_${c}`] = parseFloat(a) / parseFloat(b);
Vue.set(this.form, `comp_${c}`, parseFloat(a) / parseFloat(b));

Binding two or more data to a form input in VueJs


Tag : javascript , By : DarrenBeck
Date : March 29 2020, 07:55 AM
With these it helps I was considering having more than one value in a vue form input binding
<template> 
  <div> 
    <label for=""> Employee </label>
    <input class="form-control-plaintext" :value="showAssignedUser()" type= "text" readonly name="surname">
  </div>
</template>

<script> 
  data(){
    return:{
      asset:{},
    }
  },

  methods:{
     getAsset(){
        axios.get('/api/assets/'+this.id)
          .then ( response => {
            this.asset = response.data.data[0].data; 
            this.toFill = this.asset()
            this.assetForm.fill(this.toFill)
           })
        },

    showAssignedUser(){
        return `${this.asset.current_status.user.surname}` + ' '+ `${this.asset.current_status.user.first_name}`
    },

  },

  mounted(){
     this.getAsset();
 }
</script>
Related Posts Related QUESTIONS :
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • Is synchronous XMLHttpRequest supported in Internet Explorer 10 and 11?
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • How to calculate numbers within an array of objects
  • Using JavaScript to change CSS properties of SVG circles for all circles that was not clicked
  • Is there value in propTypeing repeat required properties at every level of nested components?
  • Call function if variable does not exist in a filter
  • localStorage value doesn't get updated automatically
  • React not updating state with setState correctly inside promises
  • Direct native JavaScript or jQuery method to get containing block of an element
  • Dynamic JSON object to Html Table
  • How to send Id and file to same controller?
  • How to Make a jQuery Table Cell(td) clickable to Run a Function?
  • Prevent the duplicate function onchange event jQuery
  • Reactjs Input Upload doesn't return local URL
  • An unexpected 'StartObject' node was found when reading from the JSON reader. A 'PrimitiveValue' node was expected
  • How to filter a JSON Array, with an eventListener input value at keyup
  • How to separate the different properties of filter in css?
  • Why dont work change event of bootstrap input spinner?
  • How to hide overflow text content in react
  • Is there another way to write line 6
  • Cypress - how to find by text content?
  • How to setstate for the dynamic checkboxes in a loop in react?
  • Is display:none safe?
  • How to create a form to change part of a href url of a button?
  • Put many function inside function in Javascript
  • how to exit from loop after a ajax call
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com