"在 Nuxt 的 vuex 存儲中更新動態對象中的值"

Question

在我的 Vue/Nuxt 項目中，我有一個表單，用戶可以在其中添加更新動態字段以用於報價計算。

當表單加載時，將創建一個具有 beforeMount 生命周期的字段，然后用戶可以選擇創建一個或多個額外的字段。

在我的數據返回中，我有這個：

data() {
 return {
      calculationFields: { qty: 0, price: 3.86, selected: false },    
     }
 }

當用戶單擊“添加字段”按鈕時，會調用 addField 方法：

addField() {
      this.$store.dispatch('quantity/updateAdd', this.calculationFields)
    },

updateAdd 操作調用 UPDATE_ADD_ITEM 突變的地方

UPDATE_ADD_ITEM(state, value) {
    state.options.push(value)
  },

value { qty: 0, price: 3.86, selected: false }

這很好用，因為選項數組是用新的字段對象更新的

在模板中，我循環這個數組以輸出 X 個字段

<div v-for="(field, index) in getCalculationFields()" :key="field" class="flex-xs justify-between calculation-field">
        <InputCustomPlaceholder type="number" :is-required="true" :input-id="`calculation-${index}`" :input-name="`calculation-${index}`" label-text="" placeholder-text="Add pieces" custom-placeholder-text="pcs" extraclass="flex-1 no-margin" />

        <a href="#" class="remove-field" @click.prevent="removeField(index)">&times;</a>
      </div>

我現在的問題是，我無法弄清楚如何在每個動態創建的輸入字段上使用 v-model，以便我可以在選項狀態下更新字段對象中的 qty 值。

因此，如果列表包含三個字段，例如：

[
{ qty: 0, price: 3.86, selected: false }, 
{ qty: 0, price: 3.86, selected: false }, 
{ qty: 0, price: 3.86, selected: false }
]

因此，當在字段號 2 中使用輸入 200 作為數量時，數組將如下所示：

[
    { qty: 0, price: 3.86, selected: false }, 
    { qty: 200, price: 3.86, selected: false }, 
    { qty: 0, price: 3.86, selected: false }
]

我相信我必須使用類似的東西

<InputCustomPlaceholder type="number" :is-required="true" :input-id="`calculation-${index}`" v-model="updateOptionList" :input-name="`calculation-${index}`" label-text="" placeholder-text="Add pieces" custom-placeholder-text="pcs" extraclass="flex-1 no-margin" />

但是最好的方法是找到字段的索引並更新數組上該索引中的值。

在非動態輸入中，我使用如下內容：

v-model="updateFieldOne"
updateFieldOne: {
    set(value) {
            this.$store.dispatch('fields/updatePartDimeWidth', value)
          }
}

按預期工作。

Answer 1

您可以提供index道具，並在突變中使用它。 EDIT_ITEM如果您想添加新的 elemenet 使用state.options.push(value)來幫助編輯項目。

this.$store.dispatch('fields/updatePartDimeWidth', {value ,index})

EDIT_ITEM(state, {value ,index }) {
    state.options[i] = value
  },