如何綁定到vue中的數組對象？

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進行 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/

Answer 2

首先-您缺少雙向綁定所必需的v-model 。

我建議你先嘗試理解v-model的概念：

您可以使用 v-model 指令在表單輸入、文本區域和選擇元素上創建雙向數據綁定。

請注意：

-

v-model 將忽略在任何表單元素上找到的初始值、選中或選定屬性。 它將始終處理 Vue 實例
數據作為真相的來源。 您應該聲明初始值
JavaScript 端，在組件的 data 選項中。

• 對於需要 IME 的語言（中文、日文、韓文等），您會注意到 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>

我建議您查看這篇文章以獲得更好的上下文。