Vue: Как использовать динамические имена в цикле v-for?

Question

[Михаил Пахмутов]

<slot v-for="area in `${ this.$route.params.type }Areas`">

Помогите, пожалуйста, сформировать строку цикла. Используя обратные ковычки, даже если просто имя правильное внутри написать цикл не запустится, а без них динамически не задать имя массива

Answer 1

[Алексей Ярков]

Делайте геттер и там вычисляйте имя. Ну и соответственно возвращайте нужное свойство, а не строку, как сейчас.

Например так: https://jsfiddle.net/yarkov_aleksei/1ub0enxq/

Comments

[Михаил Пахмутов]

Но я ведь не могу функцию в ту же строку поставить?
v-for="area in areaName()"

Или единственное решение скопировать массив в ещё один и использовать его?

[Алексей Ярков]

Михаил Пахмутов, а зачем тут функция? Я про геттер говорил.

Answer 2

[0xD34F]

v-for="area in `${ this.$route.params.type }Areas`"

Эту строку надо не перебирать, а использовать в качестве ключа для получения нужного свойства компонента:

v-for="area in this[`${$route.params.type}Areas`]"

https://jsfiddle.net/c0tjks3g/