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模型中绑定。而@change我可以改变vuex状态。

编辑：我现在拥有的东西

//使用组件

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

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

带有＆＃34;此部分的部分。$ store.registerModule＆＃34;我真的不知道如何使用它只是尝试用动态生成的VUEX状态来解决这个部分

Answer 1

我并没有完全了解你想要实现的目标，以及你得到的错误是什么。但我注意到你在共享的代码中出现了以下错误。

您的v-for="(value, key, index) in values"语法不正确且不起作用，您必须将其写成：v-for="(value, index) in values"使用哈希：value作为您的要求。请参阅此here。
你有v-model="some_dynamicly_set_vuex_state"，这是不可能的，因为你只能通过变异改变vuex状态，所以你可以有一些其他变量而不是vuex状态，你可以在该变量上有一个观察者，无论何时变量变化，改变了vuex状态。
你不能拥有一个可以带参数的计算属性，正如你在v-model="model(value)"中所做的那样，你可以按照你所展示的方法来做。

如果你可以创建一个你试图做的事情的样本jsfiddle，并解释你得到的错误，它将有助于找到确切的问题。

Vuex - 使用动态数据进行表单处理

1 个答案: