Level 1
Hello @usmanbasharal what you get when loadLanguajes() loads?
loadLanguages() {
axios.get("api/Language").then(response => {
debugger;
this.rows = data
});
}
Mar 27, 2020
3
Level 3
vue-bootstrap4-table in laravel vuejs using api
I am trying implementing vue-bootstrap4-table in laravel/ vuejs but I don't know how to get data and pass it to the rows array any help please.
how to get data from api and show it in the rows[] array like below
// rows: [
// {
// id: 1,
// name: {
// first_name: "Vladimir",
// last_name: "Nitzsche"
// },
// address: {
// country: "Mayotte"
// },
// email: "[email protected]"
// },
// {
// id: 2,
// name: {
// first_name: "Irwin",
// last_name: "Bayer"
// },
// age: 23,
// address: {
// country: "Guernsey"
// },
// email: "[email protected]"
// },
// {
// id: 3,
// name: {
// first_name: "Don",
// last_name: "Herman"
// },
// address: {
// country: "Papua New Guinea"
// },
// email: "[email protected]"
// }
// ],
methods: {
loadLanguages() {
axios.get("api/Language").then(({ data }) => (this.rows = data));
}
},
created() {
this.loadLanguages();
}
here is my full code
<template>
<div id="app">
<vue-bootstrap4-table
:rows="row"
:columns="columns"
:config="config"
>
</vue-bootstrap4-table>
</div>
</template>
<script>
import VueBootstrap4Table from "vue-bootstrap4-table";
export default {
name: "App",
data: function() {
return {
// rows: [
// {
// id: 1,
// name: {
// first_name: "Vladimir",
// last_name: "Nitzsche"
// },
// address: {
// country: "Mayotte"
// },
// email: "[email protected]"
// },
// {
// id: 2,
// name: {
// first_name: "Irwin",
// last_name: "Bayer"
// },
// age: 23,
// address: {
// country: "Guernsey"
// },
// email: "[email protected]"
// },
// {
// id: 3,
// name: {
// first_name: "Don",
// last_name: "Herman"
// },
// address: {
// country: "Papua New Guinea"
// },
// email: "[email protected]"
// }
// ],
columns: [
{
label: "کوډ",
name: "id",
filter: {
type: "simple",
placeholder: "id"
},
sort: true
},
{
label: "نوم",
name: "name.first_name",
filter: {
type: "simple",
placeholder: "نوم ولیکی"
},
sort: true
},
{
label: "مخفف",
name: "email",
sort: true
}
],
config: {
checkbox_rows: true,
rows_selectable: true,
card_title: "Vue Bootsrap 4 advanced table"
}
};
},
components: {
VueBootstrap4Table
},
methods: {
loadLanguages() {
axios.get("api/Language").then(({ data }) => (this.rows = data));
}
},
created() {
this.loadLanguages();
}
};
</script>
Level 3
I can get the data but I don't know how to pass is to rows because the way rows are getting data is different
Level 1
I think you missed the row attribute, in your code you have commented the row attribute and you have named rows instead row :
// :rows is the name that the vue-bootstrap4-table uses in the props.
:rows="row"
// row is the attribute that you passes to vue-bootstrap4-table component.
// row must have the values that you want to show inside the table component.
:columns="columns"
:config="config"
>
</vue-bootstrap4-table>
Please or to participate in this conversation.