How to bind input to vue.js model

Question

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 1

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".