Estoy tratando de hacer un .join() en una matriz que está dentro de una tabla. El resultado esperado es que cada automóvil (en el ejemplo a continuación) esté en una fila.
Intenté usar .join("\r\n") y .join("<br />") , pero no funciona. ¿Qué me estoy perdiendo?
new Vue({ el: "#table", data() { return { items: [ { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] }, { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] }, { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] }, { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] } ], fields: [ { key: "firstname", label: "First name" }, { key: "lastname", label: "Last name" }, { key: "cars", label: "Cars" } ] }; }, methods: { join() { for (let item of this.items) { item.cars = item.cars.join("<br />") } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <div id="table"> <b-button @click="join">Join Array</b-button> <b-table :fields="fields" :items="items" /> </div>El mismo fragmento anterior pero en CodePen .
El problema que está viendo es que el contenido no se interpreta, por lo que aparece como texto. Para ajustar esto, use la ranura de la cell(key) . Luego, dentro de la ranura, use v-html para interpretar la cadena como html.
new Vue({ el: "#table", data() { return { items: [ { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] }, { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] }, { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] }, { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] } ], fields: [ { key: "firstname", label: "First name" }, { key: "lastname", label: "Last name" }, { key: "cars", label: "Cars" } ] }; }, methods: { join() { for (let item of this.items) { item.cars = item.cars.join("<br />") } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <div id="table"> <b-button @click="join">Join Array</b-button> <b-table :fields="fields" :items="items"> <template #cell(cars)="data"> <span v-html="data.value"></span> </template> </b-table> </div>Suponiendo que desea que siempre esté en una línea separada (y no solo después de hacer clic en el botón en su ejemplo), puede usar las ranuras que proporciona <b-table> para personalizar el contenido de la columna y usar una simple v-for representar cada elemento en su propio <div> .
new Vue({ el: "#table", data() { return { items: [ { firstname: "John", lastname: "Doe", cars: ["Ferrari", "Tesla"] }, { firstname: "Jane", lastname: "Doe", cars: ["BMW", "Civic"] }, { firstname: "Jack", lastname: "Doo", cars: ["Corsa", "Golf"] }, { firstname: "Julie", lastname: "Doo", cars: ["Fiesta", "Brasilia"] } ], fields: [ { key: "firstname", label: "First name" }, { key: "lastname", label: "Last name" }, { key: "cars", label: "Cars" } ] }; } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script> <div id="table"> <b-table :fields="fields" :items="items"> <template #cell(cars)="{ value }"> <div v-for="car in value" :key="car"> {{ car }} </div> </template> </b-table> </div>