Javascript 动态选项的计算getter和setter

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

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

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

计算：{
正文：{
得到（）{
返回。。。
},
设置（值）{
这是$store。提交。。。
},
},
},

但是，当我呈现需要绑定的选项列表时，应该如何执行此操作

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

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

选项=[
{
值：。。。，
案文：。。。，
},
{
值：。。。，
案文：。。。，
},
...
];

您可以在vue实例中对这些选项进行建模，并在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">

---

我还添加了一个属性以及

v-for

，以便它可以跟踪每个节点的标识，从而重用和重新排序现有元素，您需要为每个项目提供唯一的键属性。键的理想值是每个项目的唯一id

您必须为选项定义突变，如“addOption”、“editOption”等

然后（但建议）定义选项组件。绑定事件以调用突变

vuex提供的一个很好的简单示例如下：

特别是看看todo组件。它负责todo列表中的单个项目。

以及他们如何使用应用程序组件中的列表。

这些是它们的突变。查看他们如何编辑、添加和删除列表项。

---

我的回答再简短不过了，转向vuex（vue+redux方法论）需要在思维和体系结构上进行转变。

这是纯vue的方式，但vuex突变需要在不直接突变源对象的情况下进行（使用

v-model

）。这取决于您是否有vuex模型，我通过Vue实例数据告诉我，这不是vuex数据。这是我在切换到vuex之前使用它的方式。但是，我特别要求使用Vuex实现。