Question

我将Vuex与我的Vue组件一起使用。当我的组件具有可编辑的静态字段时，可以使用计算属性轻松处理它们：

computed: {
  text: {
    get() {
      return ...
    },
    set(value) {
      this.$store.commit...
    },
  },
},

<input type="text" v-model="text">

但是，当我渲染需要绑定的选项列表时，应该怎么做？

options = [
  {
    value: ...,
    text: ...,
  },
  {
    value: ...,
    text: ...,
  },
  ...
];

<input type="text" v-model="option.text" v-for="option in options">

Answer 1

您必须为选项定义突变，例如＆＃34; addOption＆＃34;，＆＃34; editOption＆＃34;等...

比任选（但推荐）定义选项组件。绑定事件来调用突变。

这里提供了一个由vuex提供的简单示例： https://github.com/vuejs/vuex/tree/dev/examples/todomvc

特别要看todo组件。它负责todo列表中的单个项目。 https://github.com/vuejs/vuex/blob/dev/examples/todomvc/components/Todo.vue

以及它们如何使用应用组件中的列表。 https://github.com/vuejs/vuex/blob/dev/examples/todomvc/components/App.vue

这些是他们的突变。了解他们如何编辑，添加和删除列表项。 https://github.com/vuejs/vuex/blob/dev/examples/todomvc/store/mutations.js

我无法得到更短的答案，转向vuex（vue + redux方法论）需要改变思维和架构。

Answer 2

您可以在vue实例中将这些选项建模为data，并按照您的提及在HTML中使用它们。

var vm = new Vue({
  data: {
     options: [
       {
         value: ...,
         text: ...,
       },
       {
         value: ...,
         text: ...,
       },
       ... 
     ]
  }
})

在HTML中：

<input type="text" v-model="option.text" key="option.value" v-for="option in options">

我还添加了key属性以及v-for，以便它可以跟踪每个节点的标识，从而重用和重新排序现有元素，您需要为每个项目提供唯一的键属性。 key的理想值是每个项目的唯一ID。

用于动态选项的计算getter和setter

2 个答案: