我正在構建 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 告訴我它沒有定義？
1 回答
Qyouu
TA貢獻1786條經驗 獲得超11個贊
當您在組件上定義數據屬性時，它僅在該組件及其模板中可用。您的v-for指令在父范圍內（即在定義的組件之外tasks）。
這里最簡單的解決方案可能是將容器元素移動到組件內部，并迭代那里的任務：
<div>
<div class="card" v-for="task in tasks" :key="task.id">
<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>
</div>
注意：不能將 v- 用于模板的根元素，這就是將容器元素移動到模板中的原因。
另一種方法是將其分成兩個組件（例如TaskList和TaskItem），其中父組件負責從 API 獲取任務。子組件可以只接收一個任務作為 prop 并將其呈現給 UI。
任務列表
Vue.component('task-list', {
data: function() {
return {
tasks: []
}
},
mounted() {
this.getTasks();
},
methods: {
getTasks() {
axios.get('/tasks').then(response => {
this.tasks = response.data;
console.dir(this.tasks);
})
.catch(error => {
console.log(error);
});
}
},
template: `
<div class="container">
<task-item
v-for="task in tasks"
:key="task.id"
:task="task"
/>
</div>
`
});
任務項
Vue.component('tasks', {
props: {
task: {
required: true
}
},
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>
`
});
這樣做的好處是它更好地分離了組件的責任。您可以向組件添加邏輯TaskList來處理顯示加載微調器和/或 API 調用的錯誤消息，同時TaskItem只需要關心顯示單個任務。
- 1 回答
- 0 關注
- 177 瀏覽
添加回答
舉報
0/150
提交
取消