Javascript 如何将输入绑定到vue.js模型

有人能帮我将输入数据绑定到vue.js模型吗？我有一个

水果

对象数组，其中

价格

的值为空。我想将每个

水果

对象映射到一个带有

价格

输入的表单，在那里我可以更新价格。但是，我不确定如何找到我的

水果

对象的

价格

属性的输入

这是我的数据集：

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

这是我的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>

这是我的JSFIDLE：

---

提前谢谢

自动将

v-model

的值解释为属性名称；你不必把它放在花括号里。只要试试

v-model=“fruit.price”

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