Как использовать computed внутри v-for?

Question

[kot98]

<div ... v-for="(item, index) in list" :key="index">
  {{item.main ? item.main.name : item.default.name}}
</div>

хочу вынести это в computed:

const name = computed(() => {
  return item.main ? item.main.name : item.default.name
})

но тут item-а нет как переменной и я это понимаю. как правильно это реализовать?

Answer 1

[0xD34F]

Никак не использовать. Хотите тут computed - вместо одного значения пусть предоставляет массив:

const names = computed(() => list.map(n => (n.main ?? n.default).name));

<div v-for="n in names">
  {{ n }}
</div>

Answer 2

[Дмитрий Кузнецов]

На мой скромный взгляд - тут либо метод создавайте, а не вычисляемое свойство. Либо оставьте вывод в шаблоне.