v-model 使用 vue 映射状态的数组

Question

我正在努力在我的应用程序中创建自定义字段。我允许客户为各种对象（即 Initiative）定义自定义字段，并在更新或创建该对象时显示它们。

在我的状态下我定义了被修改或添加的对象：

(initiatives.js)

addEditInitiative: {
        name: '',
        description: '',
        product_name: '',
        product_id: '',
        quarter: '',
        year: '',
        custom_fields: []
    },

custom_fields 数组填充了为倡议定义的自定义字段。例如，在来自数据库的 json 响应中，自定义字段数组将包含类似这样的内容...

  "payload": [
    {
      "id": "5dc840c3d27a6e47b9baec33",
      "cid": "5d8502a2a284b46f3621f389",
      "name": "2",
      "description": "",
      "product_name": "Maps",
      "product_id": "5d86509ee24692444d84b155",
      "quarter": "Q2",
      "year": "2019",
      "custom_fields": [
        {
          "id": "5db8ec9fee8040e9b6dfad87",
          "cid": "5d8502a2a284b46f3621f389",
          "name": "Test",
          "type": "text",
          "form": "initiative",
          "value": ""
        },
        {
          "id": "5dba0bcedf9cbf185683ecca",
          "cid": "5d8502a2a284b46f3621f389",
          "name": "test2",
          "type": "text",
          "form": "initiative",
          "value": ""
        }
      ]
    }
  ]
}

我正在尝试通过 vuex 映射字段编辑每个自定义字段的值，或者如果这不起作用，则采用其他不会导致我现在遇到的错误的方法。我没有改变状态。我是直接在state上使用v-model。

（Vue 组件）

                    <v-item v-for="(field, index) in initiativeFields"
                            v-bind:index="index"
                            v-bind:key="field.id">
                        <v-text-field v-if="field.type = 'text'"
                                      :label="field.name"
                                      type="text"
                                      v-model="addEditInitiative.custom_fields[index].value">
                        </v-text-field>
                    </v-item>

我不确定如何用会改变状态的东西替换 v-model="addEditInitiative.custom_fields[index].value"。对于简单的字段，我一直在使用 https://github.com/maoberlehner/vuex-map-fields。例如，

（Vue 组件）

...mapFields('initiative', [
                'addEditInitiative.name',
                'addEditInitiative.description',
                'addEditInitiative.product_name',
                'addEditInitiative.product_id',
                'addEditInitiative.quarter',
                'addEditInitiative.year',
            ]),

Answer 1

v-model="test" 实际上只是 shorthand 用于 :value="test" @input="test = arguments[0]"（或 :value="test" @input="test = $event.target.value" 用于输入等本机组件）。

您可以利用这一优势将您的代码重构为如下所示：

<v-item v-for="(field, index) in initiativeFields"
        v-bind:index="index"
        v-bind:key="field.id">
    <v-text-field v-if="field.type = 'text'"
                  :label="field.name"
                  type="text"
                  :value="addEditInitiative.custom_fields[index].value"
                  @input="updateValue($event, index)">
    </v-text-field>
</v-item>

并且在您的 updateValue 方法中，您可以使用 action/mutation.

更新商店

Answer 2

尝试使用多个行字段。

https://github.com/maoberlehner/vuex-map-fields#multi-row-fields

v-model 使用 vue 映射状态的数组

v-model an array using vue map state

vue.js

vuex

v-model