Question

假设我有以下vuex商店...

state: {
  someObj: { 
    someList: [
      { key:'a', someSubList: [] },
      { key:'b', someSubList: [] },
      { key:'c', someSubList: [] },
    ]
  }
}

如何将单独的v模型绑定到每个someSubList？例如，在选中某些复选框后，我希望看到一些ID像这样填充到someSubList中：

    someList: [
      { key:'a', someSubList: [1, 13, 17, 19] },
      { key:'b', someSubList: [1, 2, 3, 4] },
      { key:'c', someSubList: [4, 16, 20] },
    ]

换句话说，如果我选中一个复选框，则会将关联的ID添加到someSubList。如果取消选中该复选框，则与该复选框关联的ID将从someSubList中删除。请记住，每个someList都有一个不同的someSubList。

我想它与下面类似，但是我不确定将什么用于v-model参数以及如何将索引传递给set方法

例如。

<span v-for="(someListRow.someSubList, index2) in someList" v-bind:key="index2">
  <v-checkbox v-model="myModel" />
</span>

computed: {
 someList: {
    get() {
      return this.$store.state.someObj.someList;
    }, 
    set(value) {
      this.$store.commit('someCommit', value)
    }
  }
}

更新：

对于有兴趣的人，我可以使用下面的帖子中提供的提示解决它，并最终做到了：

<v-checkbox @change="myChangeMethod($event, myObj)" label="MyLabel" 
 :input-value="isMyObjSelected(myObj)" />

myChangeMethod(event, myObj) {
  if (event) {
    this.$store.commit('AddToMyList', {myObj});
  } else {
    this.$store.commit('RemoveFromMyList', {myObj});
  }
}
isMyObjSelected(myObj){
    this.$store.getters.isMyObjSelected(myObj});
}

Answer 1

我相信您想将输入内容映射到商店中的某些价值？为此，您不能使用v模型。而是使用input="updateStore($event, 'pathToStoreField')"（或@change="..."）侦听器和:value="..."绑定。如果选中复选框，则需要使用:checked="..."而不是value。

例如：

<input type="checkbox" :checked="isChecked" @input="updateField($event.target.checked, 'form.field')">

...
computed:
...
  isChecked() {
    return this.$store.state.form.field;
  },
...
methods: {
  ...
  updateField(value, path) {
    const options = { path, value };
    this.$store.commit('setFieldByPath', options);
  },
  ...
},

然后，在您的商店中，您将需要一个突变setFieldByPath，该突变可以解析状态对象（state.form.field）中某个属性的字符串路径，并将该属性设置为value。

您还可以将updateField()方法作为计算机属性的setter。

有一个库使此操作更方便：https://github.com/maoberlehner/vuex-map-fields

只需注意复选框：要将其设置为选中状态，则checked属性必须为true，而不是value属性。

Answer 2

我认为，虽然不确定，但是计算值通常变得像可用的局部变量，您需要v-model通过表单发布哪些其他变量，因此如果myModel是通过的变量，则设置收到的二传手的价值：

<span v-for="(myList, index2) in someList" v-bind:key="index2">
  <v-checkbox v-model="myModel" />
</span>

然后用脚本

computed: {
 myList() {
      return this.$store.state.someObj.someList;
  }
}

Answer 3

我想你要这个：

<span v-for="(someSubList, index2) in someList" v-bind:key="index2">
  <v-checkbox v-model="myModel" />
</span>

data() {
  return {
    myModel: ''
  }
},
computed: {
 someList: {
    get() {
      return this.$store.state.someObj.someList;
    }, 
    set(value) {
      this.$store.commit('someCommit', value)
    }
  }
}

data()中的

属性可用于在模板上绑定v模型。

Answer 4

对于有兴趣的人，我可以使用下面的帖子中提供的提示解决它，并最终做到了：

0
0
.  test3.cpp  test3  ..  test2  test2.cpp  log.txt
-1
2
No such file or directory

带索引的v模型的计算属性

4 个答案: