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

Question

我有一个问题与我的道具editToWork：

app.js:42491[Vue warn]：避免直接修改道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。道具正在变异：“任务编辑”

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

Answer 1

你的问题可以更容易地解决，你不应该改变道具。v模型很好地解决了这个问题，你应该研究组件v模型。

首先，您可以使您的子组件与v-model一起工作，在子组件中使用名为value的道具。它们表示任务值。

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

其次，避免使用v型模型对道具进行变异。而是发出一个输入事件。

<textarea name="name" id="name" rows="4" class="form-control" :value="value" @input="$emit('input', $event.target.value)"></textarea>

在父组件中，现在可以像这样使用v模型。

<edit-task v-model="taskToEdit"></edit-task>