如何绑定到vue中的数组对象？答案

【问题标题】：How to bind to array objects in vue?如何绑定到vue中的数组对象？
【发布时间】：2019-05-12 02:01:18
【问题描述】：

我有一个数据数组，我想将输入元素条目（整数）绑定到数据字段中，然后汇总它们。这类似于电子表格，它可以计算同一列中指定的不同值的和或差。

我从 vue.js 文档中不明白，在这些数组对象上进行双向数据绑定需要什么。我不知道数组中的值是否正在更新。他们要么没有更新数组，要么没有更新求和链接。对于确定数据绑定是否损坏或表达式未更新的原因，您有什么建议吗？

<tr v-for="(row, powerIndex) in powers">
    <td :class="powerlabelclass(row)">{{ row.name }}</td>
    <td class="power-item" v-for="turn in turns">
        <div v-if="row.expression">
            <input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" :value="calculatepower(powerIndex, turn)" />       
        </div>
        <div v-else>
            <input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" :value="row.turns[turn]" />        
        </div>
    </td>
</tr>

这里是 js 小提琴：https://jsfiddle.net/ledlogic/fst561by/

【问题讨论】：

也许你想包含有问题的代码块并且只链接 jsfiddle 作为备份？从小提琴中读取代码是一个 PITA

标签： javascript arrays vue.js

【解决方案1】：

您需要使用v-model 而不是:value 进行2 路绑定

我假设您想自动计算总值。你只需要改变：

  <div v-else>
     <input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" v-model="row.turns[turn]" />        
  </div>

演示https://jsfiddle.net/ittus/1z6qu43y/

【讨论】：

【解决方案2】：

首先-您缺少v-model，这是双向绑定所必需的。

建议你先尝试理解v-model的概念：

您可以使用 v-model 指令创建双向数据绑定表单输入、文本区域和选择元素。

请注意：

v-model 将忽略初始值、选中或选中的属性在任何表单元素上都可以找到。它将始终处理 Vue 实例
数据作为真相的来源。您应该在
上声明初始值 JavaScript 端，在组件的 data 选项中。
对于需要输入法的语言（中文、日文、韩文等），您会注意到 v-model 在 IME 合成期间不会更新。如果您也想满足这些更新，请使用输入事件而是。

现在举个例子：

它应该是什么样子的：

<tr v-for="(row, powerIndex) in powers">
    <td :class="powerlabelclass(row)">{{ row.name }}</td>
    <td class="power-item" v-for="turn in turns">
        <div v-if="row.expression">
            <input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" v-model="calculatepower(powerIndex, turn)" />       
        </div>
        <div v-else>
            <input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" v-model="row.turns[turn]" />        
        </div>
    </td>
</tr>

我建议您查看此post 以获得更好的上下文。

【讨论】：