vue.js - 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
   }
}

他のコンポーネントがモデルを変更する可能性があるため、ストアにモデルが必要です。

問題は、どのキーが何個来るかわからないため、次のようなものは適合しないことです

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;
       }
    }

編集：理解を深めるために

API呼び出しから、話し言葉やスキルなどの多くのメタデータを持つ多くの人を取得すると想像してください。同じAPI呼び出しで、利用可能な言語を取得します。私がやりたいことは、話すことができる言語に基づいて人をフィルタリングすることです。

しかし、いくつの言語が、どの言語が来るかはわかりません。

だから私がやろうとしているのは、各言語のチェックボックスの VUEX ステートを動的に作成することです。さらに、v-model にバインドするために、同じ言語用に計算された変数などを作成する必要があります。@change で vuex-state を変更できます。

編集：私が今まで持っているもの

// コンポーネントの使用

<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;
    }

「this.$store.registerModule」の部分は、動的に生成された VUEX 状態で部分を解決しようとしただけで、使い方がよくわかりません。