我正在构建 Laravel 应用程序并尝试使用 vue.js(没有太大成功!)。我不理解组件处理 ajax 数据的方式。我发现的几乎所有显示此功能的示例都在应用程序级别而非组件级别定义组件的数据。
我正在尝试在组件本身中动态定义我的数据,但总是会出现Property or method tasks is not defined on the instance but referenced during render. 这是组件,它只是调用端点来执行基本的“待办”任务:
Vue.component('tasks', {
data: function() {
return {
tasks: []
}
},
mounted() {
this.getTasks();
},
methods: {
getTasks() {
axios.get('/tasks').then(function (response) {
this.tasks = response.data;
console.dir(this.tasks);
})
.catch(function (error) {
console.log(error);
});
}
},
template: `
<div class="card">
<div class="card-title">{{ task.name }}</div>
<div class="card-body">
<div class="service-desc">{{ task.description }}</div>
<div class="task-notes"><input class="form-control" v-model="task.notes" placeholder="Notes"></div>
<div class="task-active"><input type="checkbox" checked data-toggle="toggle" data-size="sm" v-model="task.active" v-on:click="$emit('disable')"></div>
</div>
</div>
`
});
该组件是从刀片模板中调用的,使用:
<tasks v-for="task in tasks" :key="task.id"></tasks>
tasks在函数中声明data,所以我不确定为什么 vue 告诉我它没有定义?
Qyouu