vue 맵 상태를 사용하여 어레이를 v-modeling합니다.

vue 맵 상태를 사용하여 어레이를 v-modeling합니다.

응용 프로그램에서 커스텀 필드를 만드는 중입니다.클라이언트는 다양한 오브젝트의 커스텀필드를 정의할 수 있습니다(즉,Initiative) 및 오브젝트를 갱신 또는 작성할 때 표시됩니다.

내 상태에서 수정 또는 추가할 개체를 정의합니다.

(보완적.보완적용)

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-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',
            ]),

여러 행 필드를 사용해 보십시오.

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

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작업/실행으로 스토어를 갱신할 수 있는 방법.

언급URL : https://stackoverflow.com/questions/58843432/v-model-an-array-using-vue-map-state