旧数据未被 vue 组件中的新用户输入覆盖

Question

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

我的 vue 中的一个条件：

<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: ''
    },
  }
},

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

Answer 1

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

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

和

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

Answer 2

你只需要

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

和

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