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

【问题标题】：How to bind input to vue.js model如何将输入绑定到 vue.js 模型
【发布时间】：2017-03-21 10:35:48
【问题描述】：

有人可以帮我将输入数据绑定到 vue.js 模型吗？我有一个fruit 对象数组，其中price 的值为空。我想将每个fruit 对象映射到一个带有price 输入的表单，我可以在其中更新价格。但是，我不确定如何找到我对 fruit 对象的 price 属性的输入。

这是我的数据集：

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>

在v-model 属性中，我尝试了{{ fruit.markup }} 和{{ fruit[markup] }} - 两者都抛出attribute interpolation is not allowed in Vue.js directives and special attributes 错误。

理想情况下，当我点击我的按钮时，它应该注销两个 fruit 对象以及我在输入中指定的相应价格：

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

这是我的 jsfiddle：https://jsfiddle.net/2k4mfLae/5/

提前致谢！

【问题讨论】：

标签： javascript model vue.js

【解决方案1】：

v-model 的值被自动解释为属性名；你不必把它放在花括号里。试试v-model="fruit.price"。

【讨论】：