Vue에서 동적 v-model 이름 바인딩을 수행하는 방법

Vue에서 동적 v-model 이름 바인딩을 수행하는 방법

Vue2에서는 Vuex 저장소에 저장된 양식 필드에 대한 양방향 데이터 바인딩을 활성화하는 vuex-map-fields를 사용하고 있습니다.

제 지도 필드는 이렇게 생겼습니다.

...mapFields("myModule", {
  A_grade: "obj.A_grade",
  B_grade: "obj.B_grade",
}),

내 템플릿에 이런 식으로 사용하고 있어요

<v-select v-if="someCondition" v-model="A_grade" :items="items"></v-select>
<v-select v-else v-model="B_grade" :items="items"></v-select>

완벽하게 작동하고 있습니다.유일한 걱정은 내가 이것을 써야 한다는 것입니다.v-select구성 요소를 두 번 누릅니다.그래서 역동적으로 만들기 위해 이런 걸 시도해봤어요.

// I want v-model to be resolved as 'A_grade' or 'B_grade'
<v-select v-model="fit + '_grade'" :items="items"></v-select>

export default {
  data() {
    return {
      fit: null,
    }
  },
  computed: {
    ...mapFields("myModule", {
      A_grade: "obj.A_grade",
      B_grade: "obj.B_grade",
    }),
  },
  mounted() {
    this.fit = this.someCondition ? 'A' : 'B'
  }
}

하지만 결국 구문 오류로 끝납니다.

Assigning to rvalue

Eslint 오류

v-model' directives require the attribute value which is valid as LHS

다음을 생성할 수 있는 방법이 있습니까?v-model지도 필드의 이름에서?

여기에 데모를 준비했습니다.마지막 입력 필드의 주석을 제거하면 오류가 나타납니다.

당신이 실제로 하고 있는 것은 구속력이 없습니다.A_grade또는B_gradev-model에 대한 변수이지만 값이 다음과 같은 문자열입니다.A_grade또는B_grade.~하듯이fit + '_grade'변수 중 하나에 대한 참조가 아닌 일반 문자열로 변환됩니다.

이 작업을 수행할 수 있는 방법은 개체를 만드는 것입니다.gradesA와 B라는 두 개의 키로 당신의 스토어에 있습니다(나는 당신의 샌드박스의 코드를 사용합니다).

state: {
    grades: {
      A: "",
      B: ""
    },
    A_grade: "",
    B_grade: ""
},

이제 당신의app.vuemapFields를 사용하여 값을 가져옵니다.변수도 추가합니다.fit템플릿에서 사용할 수 있도록 데이터에 추가합니다.

export default {
  name: "App",
  mounted() {},
  data() {
    return {
      fit: "B",
    };
  },
  computed: {
    // The `mapFields` function takes an array of
    // field names and generates corresponding
    // computed properties with getter and setter
    // functions for accessing the Vuex store.
    ...mapFields(["A_grade", "B_grade", "grades"]),
  },
};

그런 다음 템플릿에서 다음을 바인딩할 수 있습니다.grades입력에 대한 개체, 사용fit열쇠로다음과 같은 것:

<label>{{ fit }}: </label>
<input v-model="grades[fit]" />
<button @click="fit = fit === 'A' ? 'B' : 'A'">Toggle grade</button><br />
Grade A:{{ grades["A"] }} <br />
Grade B: {{ grades["B"] }} <br />
{{ grades }}<br />

전환 버튼을 추가했습니다.fit효과가 있다는 것을 알 수 있습니다.

이것은 효과가 있지만, 이것이 단지 사용하는 것보다 더 나은 해결책인지는 모르겠습니다.v-if그리고.v-else템플릿에 있습니다.

언급URL : https://stackoverflow.com/questions/75695474/how-to-do-dynamic-v-model-name-binding-in-vue