Question

我对Vue.js还是很陌生，试图使以下内容起作用：

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

我还有三个名字相同的按钮。

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

只有三个div中的一个并单击三个按钮之一来动态更改我要遍历的数组的最佳方法是什么？

我不使用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"

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

1 个答案: