Могу ли я использовать условные операции с v-моделью?

Question

То, что я пытаюсь достичь, - это компонент, который имеет дело с новым вводом или старым вводом (правка).Я пробовал это, вдохновленный этим вопросом :

<input type="text" placeholder="New Event" v-model="event.title ? event.title : title" required/>

или даже

<input type="text" placeholder="New Event" v-model="event.title || title" required/>

, но оба не работают.Я получаю ошибки в консоли.

event.title исходит от prop event;

title - это свойство в объекте данных со значением ''.

В Vue 2 мне нужно собрать 2 отдельных компонента?Один для нового ввода, а другой для редактирования?

Answer 1

Вы можете попробовать это, у меня это работает:

  <td>
    <div v-if="event">
      <input v-model="event.title">
    </div>
    <div v-else><input v-model="title"></div>
  </td>

Answer 2

Я думаю, вы можете использовать computed для этой цели, как показано ниже:

<input type="text" placeholder="New Event" v-model="nameOfMethod" required/>

и в computed методы создают nameOfMethod с вашей логикой, подобной этой:

computed:{
    nameOfMethod(){
        if (this.event.title  === "")
            return this.title;
        else
            return this.event.title;
    },

}