Vue 响应数据存储在 html 表行中

Question

我试图找出我哪里出错了。在下面的 VUE 脚本中，控制台日志显示了我期望的数据(确切地说是 26 条记录(。因此，我正在尝试获取成功转储并添加到dateEvents的数据，以便我可以让每条记录在我的 HTML 表中显示为一行。我显然知道我的数据在响应中返回，但为什么我在表中看不到它？

<template>
<div>
<table style="width:100%; text-align:center;">
<thead>
<tr>
<!-- <th>ID</th> -->
<th>Title</th>
<th>Type</th>
<th>Available At:</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ dateEvents.name }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: 'hello',
data () {
return {
dateEvents: [],
config: {
defaultView: 'month',
eventRender: function(event, element) {
console.log(event)
}
},
}
},
created() {
this.fetchTasks();
},
methods: {
fetchTasks() {
axios.get('/dashboard/tasks' )
.then((response) => {
// handle success
console.log(response.data);
this.dateEvents = response.data;
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
});
}
}
}
</script>

Answer 1

查看代码，我假设dateEvents是一个数组。在这种情况下，您需要添加一个v-for来循环遍历此对象数组。尝试将模板更新为以下内容：

<template>
<div>
<table style="width:100%; text-align:center;">
<thead>
<tr>
<!-- <th>ID</th> -->
<th>Title</th>
<th>Type</th>
<th>Available At:</th>
</tr>
</thead>
<tbody>
<tr v-for="dateEvent in dateEvents">
<td>{{ dateEvent.name }}</td>
</tr>
</tbody>
</table>
</div>
</template>

Answer 2

在你的 axiosthen函数的上下文中this不是你的 Vue 实例。 你需要将 Vue 实例保存在一个变量中：

var vm = this;
axios.get(...)
.then( response => vm.dateEvents = response.data );