2

我将 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">
4

2 回答 2

2

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

比可选（但推荐）定义一个选项组件。绑定事件以调用突变。

vuex 提供的一个很好的简单示例可以在这里找到： https ://github.com/vuejs/vuex/tree/dev/examples/todomvc

特别看一下 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 方法论）需要转变思维和架构。

于 2016-12-08T07:54:19.370 回答
-1

您可以将这些选项建模为您的 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以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素，您需要为每个项目提供一个唯一的关键属性。key 的理想值是每个项目的唯一 ID。

于 2016-12-08T07:00:07.803 回答