• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.

Vue cps12345 1年前 (2020-09-17) 322次浏览 0个评论

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>

解决

您的问题可以轻松解决,不应该更改props。v-model要解决这个问题,您应该考虑组件v-model

首先,可以使子组件与v-model一起使用,在子组件中使用名为value的props来表示task value。

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

其次,避免使用v-model来改变props。而是发出一个input事件。

<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>
喜欢 (0)

您必须 登录 才能发表评论!