Las propiedades calculadas de Vue no se están llamando.
Aquí está el código :
import Assignment from "./Assignment.js"; export default { components: { Assignment }, template: ` <section v-show="assignments.length"> <h2 class="font-bold mb-2">{{ title }} <span>({{assignments.length}})</span> </h2> <div class="flex gap-2"> <button v-for="tag in tags" border rounded px-1 py-px font-5 class=" "></button> </div> <ul class="border border-gray-600 divide-y divide-gray-600 mt-6"> <assignment v-for="assignment in assignments" :key="assignment.id" :assignment="assignment" ></assignment> </ul> </section> `, props: { assignments: Array, title: String }, computed: { tags() { return ('science', 'math', 'reading') //The return is not returning } } }No puedo devolver las propiedades calculadas al botón incluso con v-for
Creo que cometiste un error tipográfico.
tags() { // return an array return ['science', 'math', 'reading'] }en vez de
tags() { // will return 'reading' only. return ('science', 'math', 'reading') }Además, necesita un texto para el botón.
<div class="flex gap-2"> <button v-for="tag in tags" border rounded px-1 py-px font-5 class=" ">{{tag}}</button> </div>