Question

我有一个vue组件，该组件正在执行一系列条件，以在编辑表单时检查是否有以前的数据。由于正在编辑表单，因此总是会有以前的数据，但是如果我在输入字段中键入内容并单击“保存”按钮，则不会保留我新输入的输入，而是会保留相同的旧数据。我知道发生这种情况是因为v-if条件始终为真，但是如果用户输入新数据来替换它，我想不出一种修改条件的方法。原始作业将作为包含旧/原始数据的道具传递。

我的主意有条件

<div v-if="job.title">
  <input :value="job.title" id="title" name="title" type="text" required>
</div>
<div v-else>
  <input v-model="newJob.title" id="title" name="title" type="text" required>
</div>

props: {
  route: String,
  job: Object,
},
data() {
  return {
    newJob: {
      title: ''
    },
  }
},

因此，当我键入新信息时，v-model的{{1}}不会在vue开发工具中更新。如果用户输入内容，如何获取newJob字段进行更新，否则在页面加载时继续保存编辑表单中的旧值/原始值。

Answer 1

您只需要

<input v-model="newJob.title" id="title" name="title" type="text" required>

和

props: {
    job: Object,
},
data() {
    return {
        newJob: {
            title: this.job.title || "",
        },
    };
},

Answer 2

一种方法是使用带有对象作为其默认值的属性，而不是使用prop和数据值：

<input :value="job.title" id="title" name="title" type="text" required>

和

job: {
  type: Object,
  default: function () {
    return {
          title: '',
     }
  }
},

Vue组件中的新用户输入不会覆盖旧数据

2 个答案: