Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to bind v-model to a specific array element in vuejs?

Tags:

vuejs2

I would like to bind v-model to a specific array element like following, possible?

<input v-model='item[1]' />

Thanks

like image 350
AngeloC Avatar asked Feb 25 '17 09:02

AngeloC


People also ask

How do I add elements to an array in Vue?

To add an item to an array in Vue, call the push() method in the array with the item as an argument. The push() method will add the item to the end of the array. Clicking the button adds a new fruit item. The Array push() method adds one or more items to the end of an array and returns the length of the array.

What is the difference between v-model and V-bind?

v-bind is a one-way binding. v-model is used for binding form elements like inputs, radio buttons, textarea, checkboxes. It is used for binding data, attributes, expressions, class, styles. V-model is input value sensitive.

What is @input in VUE JS?

It provides two-way data binding by binding the input text element and the value binded to a variable assigned.

What does V-bind do in Vue?

The v-bind directive is a Vuejs directive used to bind one or more attributes, or a component prop to an element. If that attribute is binded to our data defined in Vuejs instance then dynamically changes can be observed as data changes.


1 Answers

Yes, that is the right way:

var vm = new Vue({
  el: '#vue-instance',
  data: {
    items: ["Item1", "Item2"]
  } 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>


<div id="vue-instance">
  <input v-model='items[0]'/>  
  <div v-for="item in items">
    {{item}} 
  </div>
</div>
like image 71
t_dom93 Avatar answered Oct 24 '22 16:10

t_dom93