VueJS 2에서 v-for 값 + 문자열을 사용하는 동적 v-모델

VueJS 2에서 v-for 값 + 문자열을 사용하는 동적 v-모델

내 JavaScript에는 다음과 같은 내용이 있다.

data: {
    rooms: [
         {type: 'single'},
         {type: 'double'}
         ...
    ],
    selectedSingle: 0,
    selectedDouble: 0,
    ...
},
computed: {
    capitalize: function(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
}

HTML에서 사용하는 기능:

<li v-for="(room, index) in rooms">
    <input type="number" v-model="'selected' + capitalize(room.type)">
</li>

문제는 이런 식으로 내 모델에 접근할 수 있는 방법을 찾을 수 없다는 것이고, 지금 보는 유일한 방법은 그 모델을 파괴하는 것이다.v-for수동으로 만들 수도 있지만, 내가 "방"을 많이 가지고 있기 때문에 최선의 해결책은 아니다.어떤 생각이라도 환영한다.

에 액세스하려는 경우data문자열을 통한 속성이를 위해 객체 액세스 속성 표기법(obj['propname']) 사용$data목적대로:

<input type="number" v-model="$data['selected' + capitalize(room.type)]">

게다가 계산은 정말 방법이어야 한다.

  methods: {                                // changed from computed to method
    capitalize: function(string) {

데모:

new Vue({
  el: '#app',
  data: {
    rooms: [
      {type: 'single'},
      {type: 'double'}
    ],
    selectedSingle: 111,
    selectedDouble: 222,
  },
  methods: {                                // changed from computed to method
    capitalize: function(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <ul>
    <li v-for="(room, index) in rooms">
      <input type="number" v-model="$data['selected' + capitalize(room.type)]">
    </li>
  </ul>
</div>

Vue 3을 사용하는 사람은 다음을 사용하십시오.this대신에$data.

예를 들면 다음과 같다.

import { reactive, createApp } from 'vue';

createApp({
  setup() {
    const state = reactive({
      propertyA: 'valueA',
      propertyB: 'valueB',
    });
    return state;
  };
});

<input v-for="p in ['propertyA', 'propertyB']" v-model="this[p]">

참조URL: https://stackoverflow.com/questions/49902406/dynamic-v-model-using-v-for-value-string-in-vuejs-2