如何在 vue.js 的 v-model 中正确应用三元运算符？

Question

我正在尝试在 v-model 中应用三元运算符，但它不起作用。我还在stackoverflow上阅读了很多类似的问题和答案，但没有人回答我的问题。

我创建了一个数据变量testCondition，它默认设置为 false。利用这个条件testCondition?name:place，地方则返回V模型如果testCondition是假的，但如果testCondition为真，则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}} 中

实际结果：如果testCondition设置为false，则仅适用于 {{place}}

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

您需要一个带有 getter 和 setter 的计算属性：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"