переделываю работу с тасками todo list'a через API. Не могу понять как обратиться к props при апдейте
Предаю из шаблона в Vue-компонент данные таска, который хочу отредактировать, но не знаю как правильно обратиться к oldtask при axios запросе, а конкретно к id. Вот что в обык. контроллере
public function edit($id)
{
$task = Task::find($id);
return view('pages.edit', ['task'=>$task]);
}
компонент в шаблоне
<edit v-bind:oldtask ="{{ json_encode($task) }}"></edit>
Api контроллер
public function update(Request $request)
{
$task = Task::find($request->id);
$task->title = $request->get('title');
$task->description = $request->get('description');
$task->save();
}
компонент Vue
<template>
<form @submit.prevent="submit">
<!-- <div v-for="old in oldtask">-->
<div class="form-group">
<label for="task-title">Task name</label>
<input v-model="task.title" type="text" name="title"
class="form-control" id="task-title">
</div>
<div class="form-group">
<label for="task-description">Task description</label>
<textarea name="description" class="form-control" id="task-description" rows="3" v-model="task.description"></textarea>
</div>
<button type="submit" class="btn btn-success">Update task</button>
<!-- </div>-->
</form>
</template>
<script>
export default {
data() {
return {
tasks: [],
task: {
title: '',
description: ''
},
props: [
'oldtask'
]
}
},
methods: {
submit() {
axios.patch(`/api/tasks/update`, {
id: this.oldtask.id,
title: this.task.title,
description: this.task.description
})
.then(response => {
console.log(response)
})
}
}
}
</script>
Ответы (1 шт):
Автор решения: Cathari
→ Ссылка
обшибка была в том, что надо было вынести props. вот рабочий код
template>
<form @submit.prevent="submit">
<div class="form-group">
<label for="task-title">Task name</label>
<input v-model="task.title" type="text" name="title"
class="form-control" id="task-title">
</div>
<div class="form-group">
<label for="task-description">Task description</label>
<textarea name="description" class="form-control" id="task-description" rows="3" v-model="task.description"></textarea>
</div>
<button type="submit" class="btn btn-success">Update task</button>
</form>
</template>
<script>
export default {
props: [
'oldtask'
],
data() {
return {
task: {
id: '',
title: '',
description: ''
}
}
},
mounted() {
this.getDate();
},
methods: {
getDate() {
this.task = this.oldtask;
// console.log(this.oldtask);
},
submit() {
axios.patch(`/api/tasks/update`, {
id: this.oldtask.id,
title: this.task.title,
description: this.task.description
})
.then(response => {
window.location.href = `/`;
})
}
}
}
</script>