1

我尝试使用大量动态加载的过滤值来完成过滤机制。意味着我得到例如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 状态。

语言复选框

编辑：我到现在为止

//使用组件

<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 状态来解决部分

4

1 回答 1

0

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

  1. 你有v-for="(value, key, index) in values"不正确的语法并且不起作用，你必须像这样写：v-for="(value, index) in values"使用哈希：value作为你的要求。请参阅此处的示例。
  2. 你有v-model="some_dynamicly_set_vuex_state"，这是不可能的，因为你只能通过突变来改变 vuex 状态，所以你可以有一些其他变量，而不是 vuex 状态，并且你可以在该变量上设置一个观察者，只要该变量发生变化，就改变 vuex 状态。
  3. 你不能有一个可以接受参数的计算属性，就像你试图做的那样v-model="model(value)"，你可以像你展示的那样做。

如果您可以为您尝试做的事情创建一个示例 jsfiddle，并解释您遇到的错误，这将有助于找到确切的问题。

于 2016-11-24T15:17:35.563 回答