javascript - Vue警告避免改变道具“taskToEdit”
问题描述
我的道具 editToTask 有问题:
app.js:42491 [Vue 警告]:避免直接改变 prop,因为只要父组件重新渲染,该值就会被覆盖。相反,使用基于道具值的数据或计算属性。正在变异的道具:“taskToEdit”
组件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>
组件 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>
解决方案
你的问题可以更容易解决,你不应该改变道具。v-model
很好地解决了这个问题,您应该研究组件 v-model。
首先,您可以使您的子组件与 v-model 一起使用,在子组件中使用名为 value 的道具。其中代表任务值。
<script>
export default {
props: ["value"],
};
</script>
其次避免使用 v-model 来改变道具。而是发出一个输入事件。
<textarea name="name" id="name" rows="4" class="form-control" :value="value" @input="$emit('input', $event.target.value)"></textarea>
在您的父组件中,您现在可以像这样使用 v-model 。
<edit-task v-model="taskToEdit"></edit-task>
推荐阅读
- .net - 如何处理多个firebase项目服务器端?
- java - 带数字键的枚举
- javascript - 有过滤/显示部分表格的代码。想知道如何将整个表过滤为一个吗?
- wordpress - Nginx 拒绝 GET 方法
- node.js - 如何从 mysql 结果中获取 node.js 中的数据并将其显示在 index.hbs 上
- reactjs - 无法读取开玩笑挂载中未定义的属性“then”
- python - python twilio flask:索引超出范围
- cypress - 即使一次检查失败,如何继续执行
- c++ - 关于如何使用此代码段实现 SFINAE 的问题
- java - 荷兰国旗单次遍历排序