Question

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

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

（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映射字段来编辑每个自定义字段的值，或者，如果这不起作用，则其他某种方式也不会引起我现在得到的错误。我不是在改变状态。我直接在状态上使用v模型。

（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

尝试使用多个行字段。

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

Answer 2

v-model="test"实际上只是: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方法中，您可以使用操作/变异来更新商店。

使用vue映射状态对数组进行v建模

2 个答案: