I am facing an issue with my props editToTask :
app.js:42491 [Vue warn]: To prevent overwriting the value when the parent component re-renders, avoid directly mutating a prop. Instead, use a data or computed property based on the prop's value. Mutated Prop: "taskToEdit"
Component TaskComponent.vue
<template>
...
<button
type="button"
class="btn btn-secondary"
data-toggle="modal"
data-target="#editModal"
@click="getTask(task.id)"
>Editer</button>
</li>
<edit-task v-bind:taskToEdit="taskToEdit"></edit-task>
...
</template>
<script>
export default {
data() {
return {
tasks: {},
taskToEdit: "",
};
},
methods: {
getTask(id) {
axios
.get("http://localhost:3000/tasks/edit/" + id)
.then((res) => (this.taskToEdit = res.name))
.catch((error) => console.log(error));
},
};
</script>
Component EditTaskComponent :
<template>
...
<form>
<div class="form-group">
<label for>Nom des tâches</label>
<textarea name="name" id="name" rows="4" class="form-control" v-model="taskToEdit"></textarea>
</div>
</form>
...
</template>
<script>
export default {
props: ["taskToEdit"],
};
</script>