Vue.js динамический сбор данных для v-for

Question

Я довольно новичок в Vue.js, пытаюсь заставить работать следующее:

У меня есть несколько массивов объектов в корневых данных экземпляра представления - скажем, их имена to do list, shopping list, meetings list.

У меня также есть три кнопки с одинаковыми именами.

Если я жестко кодирую <div v-for='items in todolist'>, конечно, это работает, однако:

Как лучше всего иметьтолько один из этих div s и динамически изменять, какой массив я перебираю, когда мы нажимаем одну из трех кнопок?

Я не использую 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"