user1547174 user1547174 - 1 month ago 12
Javascript Question

How to bind input to vue.js model

Can someone help me bind input data to a vue.js model? I have an array of

fruit
objects that have an empty value for
price
. I want to map each
fruit
object to a form with a
price
input where I can update the price. However, I am not sure how to find my input to the
price
property of my
fruit
object.

Here is my data set:

fruit_basket:
[
{
fruit: 'banana',
fruit_label: 'Banana',
price: ''
},
{
fruit: 'cherry',
fruit_label: 'Cherry',
price: ''
}
]
}


Here is my HTML:

<div id="vue-instance">
<div class="container" v-for="fruit in fruit_basket">
<div class="row">
<div class="col-md-4">
<p>Fruit - {{ fruit.fruit_label }}: </p>
</div>
<div id="inputs_container" class="col-md-4">
Price: <input type="" class="" v-model="{{ what should go here? }}"> <!-- //I've tried {{ fruit.price }}, {{ fruit[ price ] }} -->
</div>
</div>
</div>

<br />
<div class="container">
<button class="btn btn-primary" v-on:click="print_fruit(fruit_basket)">Save</button>
</div>
</div>


in the
v-model
attribute, i have tried
{{ fruit.markup }}
and
{{ fruit[markup] }}
- both of which throw
attribute interpolation is not allowed in Vue.js directives and special attributes
errors.

Ideally, when I click my button, it should log out both
fruit
objects with corresponding prices that I specify in the input:

[
{
fruit: 'banana',
fruit_label: 'Banana',
price: 3
},
{
fruit: 'cherry',
fruit_label: 'Cherry',
price: 4
}
]


Here is my jsfiddle: https://jsfiddle.net/2k4mfLae/5/

Thanks in advance!

Answer

The value of v-model is automatically interpreted as a property name; you don't have to put it in curly braces. Just try v-model="fruit.price".