Vuex - Обработка формы с динамическими данными

Question

Я пытаюсь выполнить механизм фильтрации с большим количеством динамических загружаемых значений фильтрации. Значит я получить, например data

[ 
    { 
    key : value 
    }, 
    { 
    key : value 
    } 
] 

то в моем шаблоне

<md-checkbox 

    @change="change($event)" 
    v-for="(value, key, index) in values" 
    id="index" 
    v-model="some_dynamicly_set_vuex_state" 

>{{key}}</md-checkbox> 

я попробовал некоторые вещи, как:

... 
v-model="model(value)" 
... 

with 

computed : { 
    model : function(val){ 
    //error and still no clue how to set the store.state 
    } 
} 

и

... 
v-model="model(value)" 
... 

with 

methods : { 
    model : function(val){ 
    //same error and still no clue how to set the store.state 
    } 
} 

мне нужны модели в магазин beca использование других компонентов может их мутировать.

проблема заключается в том, что я не знаю, какой ключ и как многие из них будут приходить так-то вроде следующего не будет соответствовать

const store = new Vuex.Store({ 
    state: { 
     key1: false, 
     key2 : false,   
    }, 
    mutations: {} 
    } 
) 
    ... 
    v-model="key" 
    ... 

    with 

    computed : { 
     key1 : function(){ 
      return this.$store.state.key1; 
     }, 
     key2 : function(){ 
      return this.$store.state.key2; 
     } 
    } 

EDIT: для лучшего понимания

Представьте, я получаю от вызова API многие люди с большим количеством метаданных, таких как разговорные языки, навыки и т. д. В том же API-вызове я получаю доступные языки. То, что я хочу сделать, - это фильтрация лиц на основе языка, на котором они могут говорить.

Но я не знаю, сколько языков и какие языки приходят.

Так что я пытаюсь сделать так или иначе динамически создавать государства VUEX для флажков для каждого языка. Кроме того, мне нужно создать для одних и тех же языков вычисленную переменную или так для привязки в v-модели. И @change я могу изменить состояние vuex.

EDIT: что я никогда до сих пор

// с помощью компонента

<filter-checkbox storeKey="language" :values="facets.languages" id_prefix="language_"></filter-checkbox>

<template> 
    <div> 
     <!--the value in the v-for is just additional data which represents the count of person who can speak the language , just needed to do like this to have th key--> 
     <md-checkbox @change="change($event)" v-for="(value, key, index) in values" :id="id_prefix+index" v-model="model">{{key}}</md-checkbox> 
    </div> 
</template> 

<script> 

    export default{ 
     props : ['values','id_prefix','storeKey'],  
     computed : { 
      model : function(){ 
       //with the key of the v-for    
       return this.$store.state[somehowDynamicly]; 
      } 
     }, 
     methods : { 
      change : function(e){ 
       this.$store.commit('changeState',{ 
        //maybe a dynamicly computed value or something? 
        state : this[somehowDynamicly] 
        value : e 
       }) 
      } 
     }, 
     created : function(){ 
      //this is not working as in "created"-function props (storeKey) are not available 
      this.$store.registerModule(this.storeKey, { 
      // ...also somehowDynamicly 
      })  
    } 
    } 
</script> 

, а затем в глобальном хранилище

//maybe this has to go also in the this.$store.registerModule function? 
    mutations: { 
     changeState (state, objValues){ 
     state[objValues.state] = objValues.value; 
    } 

часть с «этим. $ Store.registerModule», я действительно не знаю, как ее использовать, это просто попытка решить эту часть с динамически генерируемыми состояниями VUEX.

Answer 1

Я не совсем понимаю, что вы пытаются достичь и какова ошибка, которую вы получаете. Но я заметил следующие ошибки, которые вы делаете в коде, который вы разделили.

1. у вас есть v-for="(value, key, index) in values", который не является правильным синтаксисом и не будет работать, вам придется написать это нравится: v-for="(value, index) in values" использовать хэш: value, как вол вашего требования. см. пример этого here.
2. У вас есть v-model="some_dynamicly_set_vuex_state", что невозможно, так как вы можете изменять состояние vuex только с помощью мутации, поэтому вместо состояния vuex вы можете иметь некоторую другую переменную, и вы можете иметь наблюдателя на этой переменной, когда эта переменная изменяется, мутировать состояние vuex.
3. Вы не можете вычислить свойство, которое может принимать параметр, как вы пытаетесь сделать в v-model="model(value)", вы можете сделать это как методы, как вы показали.

Если вы можете создать образец jsfiddle того, что вы пытаетесь сделать, и объяснить ошибку, которую вы получаете, это будет полезно при поиске точной проблемы.