Question

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

我不了解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/

Answer 1

您需要使用v-model而非:value进行双向绑定

我假设您要自动计算总价值。您只需要更改：

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

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

Answer 2

最重要的是-您缺少v-model，这是双向绑定所必需的。

我建议您先尝试了解python filename.py pdfname.pdf的概念：

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

请注意：

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

现在为您的示例：

应为：

v-model

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

如何绑定到Vue中的数组对象？

2 个答案: