Question

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

这是我的数据集：

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/

提前致谢！

Answer 1

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

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

1 个答案: