I'm trying to create a .join() on an array within a table. The expected result is that each vehicle (in the example below) is in a row.
I have tried using .join("\r\n") and .join("<br />") but it doesn't work. What did I miss?
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>
Same code snippet as above, but on CodePen.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Assuming you want it to always be on a separate row (and not just after clicking the button as in the example), then you can customize it using the slot provided by
<b-table>content of the column, and uses a simplev-forto render each element in its own<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" } ] }; } });The problem you are seeing is that the content is not interpreted, so it is displayed as text. To adjust this, use the
cell(key)slot. Then in the slot, usev-htmlto interpret the string as 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("") } } } });