我正在構(gòu)建 Laravel 應(yīng)用程序并嘗試使用 vue.js（沒(méi)有太大成功！）。我不理解組件處理 ajax 數(shù)據(jù)的方式。我發(fā)現(xiàn)的幾乎所有顯示此功能的示例都在應(yīng)用程序級(jí)別而非組件級(jí)別定義組件的數(shù)據(jù)。我正在嘗試在組件本身中動(dòng)態(tài)定義我的數(shù)據(jù)，但總是會(huì)出現(xiàn)Property or method tasks is not defined on the instance but referenced during render. 這是組件，它只是調(diào)用端點(diǎn)來(lái)執(zhí)行基本的“待辦”任務(wù)：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> `});該組件是從刀片模板中調(diào)用的，使用：<tasks v-for="task in tasks" :key="task.id"></tasks>tasks在函數(shù)中聲明data，所以我不確定為什么 vue 告訴我它沒(méi)有定義？
1 回答
Qyouu
TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊
當(dāng)您在組件上定義數(shù)據(jù)屬性時(shí)，它僅在該組件及其模板中可用。您的v-for指令在父范圍內(nèi)（即在定義的組件之外tasks）。
這里最簡(jiǎn)單的解決方案可能是將容器元素移動(dòng)到組件內(nèi)部，并迭代那里的任務(wù)：
<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- 用于模板的根元素，這就是將容器元素移動(dòng)到模板中的原因。
另一種方法是將其分成兩個(gè)組件（例如TaskList和TaskItem），其中父組件負(fù)責(zé)從 API 獲取任務(wù)。子組件可以只接收一個(gè)任務(wù)作為 prop 并將其呈現(xiàn)給 UI。
任務(wù)列表
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>
`
});
任務(wù)項(xiàng)
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>
`
});
這樣做的好處是它更好地分離了組件的責(zé)任。您可以向組件添加邏輯TaskList來(lái)處理顯示加載微調(diào)器和/或 API 調(diào)用的錯(cuò)誤消息，同時(shí)TaskItem只需要關(guān)心顯示單個(gè)任務(wù)。
- 1 回答
- 0 關(guān)注
- 187 瀏覽
添加回答
舉報(bào)
0/150
提交
取消