v-for 的 Vue.js 动态数据收集

Question

我对 Vue.js 还是很陌生，试图让以下工作：

我在视图实例的根数据中有几个对象数组 - 假设它们的名称是 to do list, shopping list, meetings list。

我也有三个同名的按钮。

如果我硬编码<div v-for='items in todolist'>，当然可以，但是：

当我们单击三个按钮之一时，只有其中一个 divs 并动态更改我正在循环的数组的最佳方法是什么？

我没有使用 ES6，只包含 CDN。

我正在尝试做的基本示例（不工作）可以在这里找到： https://jsfiddle.net/eywraw8t/415174/

有一个链接列表应该改变下面列表的 v-for 数据收集。

Answer 1

使用计算属性根据其他属性返回正确的数组。

例如

data: {
  lists: {
    todos: [...],
    shopping: [...],
    meetings: [...],
  },
  currentList: 'todos'
},
computed: {
  items () {
    return this.lists[this.currentList]
  }
}

在你的模板中，使用类似

<p>
  <label>Todos <input type="radio" v-model="currentList" value="todos"></label>
  <label>Shopping <input type="radio" v-model="currentList" value="shopping"></label>
  <label>Meetings <input type="radio" v-model="currentList" value="meetings"></label>
</p>
<div v-for="item in items">
  <!-- etc -->
</div>

JSFiddle Demo

---

如果你想通过方法设置currentList属性，那完全可以，例如

<a v-for="list in ['todos', 'shopping', 'meetings']" @click="setCurrentList(list)">
  {{ list }}
</a>

在你的方法中......

methods: {
  setCurrentList(list) {
    this.currentList = list
  }
}

甚至内联

@click="currentList = list"