Vue警告避免改变道具“taskToEdit”

Posted 2023-02-22

【中文标题】Vue警告避免改变道具“taskToEdit”

【英文标题】：Vue warn Avoid mutating a prop "taskToEdit"

【发布时间】：2020-12-23 14:32:30

【问题描述】：

我的道具 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>

组件编辑任务组件：

<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>

【参考方案1】：

你的问题可以更容易解决，你不应该改变道具。 v-model 很好地解决了这个问题，您应该查看 component v-model。

首先你可以让你的子组件与 v-model 一起工作，在子组件中使用一个名为 value 的 prop。代表任务价值。

<script>
export default 
  props: ["value"],
;
</script>

其次避免使用 v-model 来改变 prop。而是发出一个输入事件。

<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>

【讨论】：

谢谢，但你确定@input="$emit('input', $event)，因为我不能在textearea [object InputEvent]写

刚刚测试了代码而不是 $event 它应该是 $event.target.value 也编辑了答案

工作！非常感谢！