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

Posted 2023-02-22

【中文标题】如何将输入绑定到 vue.js 模型

【英文标题】：How to bind input to vue.js model

【发布时间】：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/

提前致谢！

【参考方案1】：

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