I am new to Laravel and Vue.js.
(我是Laravel和Vue.js的新手。)
I need to display the data on a Vue component. (我需要在Vue组件上显示数据。)
The tableData variable in axios.get response is not empty and returning an array. (axios.get响应中的tableData变量不为空,并返回一个数组。)
But it is not displaying on the table. (但是它没有显示在桌子上。)
Is there something wrong with my code? (我的代码有问题吗?)
I am following a tutorial on Medium. (我正在关注有关Medium的教程。)
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Display Name</th>
<th scope="col">Description</th>
<th scope="col">Created At</th>
</tr>
</thead>
<tbody>
<tr class="" v-if="tableData.length === 0">
<td class="lead text-center" :colspan="columns.length + 1">No data found.</td>
</tr>
<tr v-for="(data, key1) in tableData" :key="data.id" class="m-datatable__row" v-else>
<td>{{ serialNumber(key1) }}</td>
<td v-for="(value, key) in data">{{ value }}</td>
</tr>
</tbody>
</table>
</div>
<script>
export default {
props: {
fetchUrl: { type: String, required: true },
columns: { type: Array, required: true },
},
data() {
return {
tableData: []
}
},
created() {
console.log(this.fetchUrl);
return this.fetchData(this.fetchUrl)
},
methods: {
fetchData(url) {
axios.get(url)
.then(response => {
console.log(response.data.data)
this.tableData = response.data.data
console.log(this.tableData)
})
},
/**
* Get the serial number.
* @param key
* */
serialNumber(key) {
return key + 1;
},
},
filters: {
columnHead(value) {
return value.split('_').join(' ').toUpperCase()
}
},
name: 'Read'
}
</script>
<style scoped>
</style>
ask by ghost translate from so 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…