Как использовать динамическое свойство из объекта из магазина как v-модель?

Question

Я оборачиваюсь вокруг этого и не могу понять, как это сделать.

Как можно связать входные данные со свойством объекта магазина? Значение: мой компонент знает только объект хранилища, но не знает заранее, какие свойства содержит объект.

Возьмите этот пример:

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-модель будет пытаться изменить свойство deep, таким образом, вызывая изменение хранилища. который выдаст ошибку до того, как компонент даже вызовет метод set () для объекта, верно?

Так что я хотел бы знать, как правильно поступить?

Мой реальный сценарий состоит в том, что я создаю динамический фильтр с флажками, и во время выполнения я не знаю, сколько у него будет вариантов. Это означает, что я буду перебирать свои опции для создания флажков, но тогда привязка данных должна быть в форме «values ​​[]». И вот тут начинаются мои головные боли.

Спасибо всем заранее

Answer 1

Из документации VueJs:

Пользовательские события также можно использовать для создания пользовательских входов, которые работают с v-модель. Помните, что:

 <input v-model="searchText">

делает то же самое, что и:

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

При использовании с компонентом v-модель делает следующее:

 <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 вы используете модель магазина напрямую.