저장소의 개체에 있는 동적 속성을 v-모델로 사용하는 방법은 무엇입니까?

저장소의 개체에 있는 동적 속성을 v-모델로 사용하는 방법은 무엇입니까?

나는 이 일에 대해 머리를 싸매고 있는데 이 일을 어떻게 해야 할지 잘 모르겠다.

입력 데이터를 스토어 객체 속성에 바인딩하려면 어떻게 해야 합니까?즉, 내 컴포넌트는 스토어 오브젝트만 알고 오브젝트에 어떤 속성이 포함되어 있는지 사전에 알 수 없습니다.

다음 예를 들어보겠습니다.

Vue.component('os-choice', {
  template: `
    <div>
      <h5>Select OS</h5>
  
      <div>
        <label class="checkbox">
          <input type="checkbox" value="linux" v-model="linux">
            Linux
        </label>
      </div>

      <div>
        <label class="checkbox">
          <input type="checkbox" value="macos" v-model="macos">
            MacOS
        </label>
      </div>

      <div>
        <label class="checkbox">
          <input type="checkbox" value="windows" v-model="windows">
            Windows
        </label>
      </div>

    </div>
  `,
  computed: {
    linux: {
      get() {
        return store.state.linux;
      },
      set(val) {
        store.commit('updateLinux', {
          linux: val
        });
      }
    },
    macos: {
      get() {
        return store.state.macos;
      },
      set(val) {
        store.commit('updateMacos', {
          macos: val
        });
      }
    },
    windows: {
      get() {
        return store.state.windows;
      },
      set(val) {
        store.commit('updateWindows', {
          windows: val
        });
      }
    },
  }  
});


Vue.component('os-choice2', {
  template: `
    <div>
      <h5>Select OS</h5>
  
        <div v-for="(value,index) in os" :key="index">
          <label class="checkbox">
            <input type="checkbox" value="index" v-model="value">
              {{index}}
          </label>
        </div>

      </div>

    </div>
  `,
  computed: {
    os: {
      get(){ return store.state.os; },
      set(event){
        var name = event.target.value;
        var value = event.target.checked;
        store.commit('updateOs', {name: name, value: value});
      }
    },
  }  
});


 const store = new Vuex.Store({
  state: {
    // initial state
    linux: true,
    macos: true,
    windows: false,
    os: {
      linux: true,
      macos: true,
      windows: false,
    }
  },
  mutations: {
    updateLinux(state, payload) {
      console.log('STORE: updated linux');
      state.linux = payload.linux;
    },
    updateMacos(state, payload) {
      console.log('STORE: updated MacOS');
      state.macos = payload.macos;
    },
    updateWindows(state, payload) {
      console.log('STORE: updated Windows');
      state.windows = payload.windows;
    },
    updateOs(state, payload) {
      console.log('STORE: updated OS');
      state.os[payload.name] = payload.value;
    }
  }
});



var app = new Vue({
  el: "#app",


  
})

.row{
  width: 100%;
}
.column{
  width: 50%;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>

<div id="app" style="text-align:center;">
  <div class="row">
    <div class="column">
      <os-choice></os-choice>
    </div>
    <div class="column">
      <os-choice2></os-choice2>
    <div>
  </div>
</div>

첫 번째 컴포넌트는 정상적으로 동작합니다.두 번째 구성 요소는 저장소를 업데이트하지 않고 오류 "[vuex] 변환 핸들러 외부에 있는 vuex 저장소 상태를 변환하지 않음"을 생성합니다.

왜 그런 일이 일어나는지 알 것 같아요.구성 요소의 계산된 속성이 변경되는 것이 아니라 개체를 가리키므로 v-model은 딥 속성을 변경하려고 시도하므로 구성 요소가 개체에 대해 set() 메서드를 호출하기 전에 강제로 스토어를 변경하십시오.

그래서 제가 알고 싶은 건 어떻게 하면 좋을까요?

실제 시나리오에서는 체크박스를 사용하여 동적 필터를 작성하고 실행 시 몇 가지 옵션을 사용할 수 있는지 알 수 없습니다.즉, 체크박스를 작성하기 위해 옵션을 루프합니다만, 데이터 바인딩은 「values[]」의 형식이어야 합니다.여기서부터 두통이 시작되죠

잘 부탁드립니다.

VueJs 매뉴얼 참조:

사용자 지정 이벤트를 사용하여 v-model과 함께 작동하는 사용자 지정 입력을 생성할 수도 있습니다.이 점에 주의해 주십시오.

 <input v-model="searchText">

는 다음과 같은 작업을 수행합니다.

 <input   v-bind:value="searchText"   v-on:input="searchText =
 $event.target.value"
 >

v-model은 구성 요소에서 사용되는 경우 대신 다음과 같은 작업을 수행합니다.

 <custom-input   v-bind:value="searchText"   v-on:input="searchText =
 $event"
 ></custom-input>

그래서 그 대신v-model, 를 사용할 수 있습니다.value처럼v-bind:value="value"스토어를 적절하게 업데이트하기 위해 다음과 같은 이벤트를 매핑합니다.v-on:input="store.commit('store.commit('updateOs', event.target.value)"

다른 컴포넌트는 Vuex가 권장하는 작업을 정확히 따르고 있기 때문에 동작합니다.https://vuex.vuejs.org/guide/forms.html

하지만,v-for매장 모델을 직접 사용하고 있습니다.

언급URL : https://stackoverflow.com/questions/56351796/how-to-use-a-dynamic-property-from-an-object-from-store-as-a-v-model