Как правильно применить тернарный оператор в v-модели в vue.js?

Question

Я пытаюсь применить троичный оператор в v-модели, но он не работает.Я также прочитал много похожих вопросов и ответов по stackoverflow, но никто не отвечает на мой запрос.

Я создал переменную данных testCondition , для которой по умолчанию установлено значение false.Используя это условие testCondition?name:place, place возвращается в v-модель, если testCondition имеет значение false, но если testCondition равно true, тогда v-модель ничего не возвращает.

Вот мой код:

new Vue({
  el: "#app",
  data: {
    name: '',
    place: '',
    testCondition: false,
  },
})

body {
  padding: 15px;
}

input {
  border-radius: 3px;
  padding: 5px;
  border: thin solid lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <br>
  <input type="text" v-model="testCondition?name:place">
  <br><br> Test condition status: {{testCondition}}
  <br> Name: {{name}}
  <br> Place: {{place}}
</div>

Ожидаемый результат: Если я изменю значение testCondition с false на true, вывод должен быть показан в {{name}}

Фактический результат: работает только для {{place}}, если testCondition имеет значение false

Answer 1

Попробуйте это: <input type="text" v-model="$data[testCondition ? 'name' : 'place']">

new Vue({
  el: "#app",
  data: {
    name: '',
    place: '',
    testCondition: false,
  },
})

body {
  padding: 15px;
}

input {
  border-radius: 3px;
  padding: 5px;
  border: thin solid lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <br>
  <input type="text" v-model="$data[testCondition ? 'name' : 'place']">
  <br><br> Test condition status: {{testCondition}}
  <br> Name: {{name}}
  <br> Place: {{place}}
</div>

Answer 2

Вам нужно вычисляемое свойство с геттером и сеттером: https://vuejs.org/v2/guide/computed.html#Computed-Setter

computed: {
  myModel: {
    get() {
      return this.testCondition ? this.name : this.place;
    }
    set(newValue) {
      this.doSomethingWith(newValue);
    }
}
// then in template: v-model="myModel"