Старые данные не переопределяются новым пользовательским вводом в компоненте vue

#javascript #vue.js

Вопрос:

У меня есть компонент vue, который выполняет серию условных выражений, чтобы проверить, есть ли предыдущие данные при редактировании формы. Поскольку форма редактируется, всегда есть предыдущие данные, но если я ввожу что-то в поле ввода и нажимаю кнопку Сохранить, мой недавно введенный ввод не сохраняется, а остаются те же старые данные. Я понимаю, что это происходит потому v-if , что условие всегда истинно, но я не могу придумать способ изменить условие, если пользователь вводит новые данные для его замены. Исходное задание передается как prop, который содержит старые / исходные данные.

Условие из моего 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: ''
    },
  }
},

Поэтому, когда я набираю новую информацию v-model , for newJob не обновляется в инструментах разработки vue. Как мне обновить поле newJob, ЕСЛИ пользователь что-то вводит, в противном случае продолжайте сохранять старое / исходное значение, которое было в форме редактирования при загрузке страницы.

1. @phil извините за форматирование.

2. Если job.title существует, то отображается первый ввод, и вы не используете v-model или @input для обработки изменений, поэтому ничего не изменится, верно?

3. @DecadeMoon это правильно. Итак, я хочу, чтобы, если пользователь начинает что-то вводить или заменяет исходное значение, новое значение распознается vue, и это новое значение сохраняется в БД.

Ответ №1:

Вам нужно только

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

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

Ответ №2:

Одним из подходов было бы использование свойства с объектом в качестве значения по умолчанию, а не реквизита и значения данных:

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

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