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

Question

我正在尝试在 v-model 中应用三元运算符，但它不起作用。我还在 StackOverflow 上阅读了很多类似的问题和答案，但没有人回答我的问题。
我创建了一个数据变量 测试条件 默认情况下设置为 false。使用此条件 testCondition?name:place , 地点 如果 在 v-model 中返​​回测试条件 为假，但如果 测试条件 为真，则 v-model 不返回任何内容。
这是我的代码:

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>

预期结果:如果我更改 的值测试条件 来自 假 至 真实 ，输出应显示在 {{name}}
实际结果:仅适用于 {{place}} if 测试条件 设置为 假

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>