Question

我正在尝试在v模型中应用三元运算符，但是它不起作用。我还阅读了很多关于stackoverflow的类似问题和答案，但没有一个回答我的查询。

我创建了一个数据变量 testCondition ，默认情况下将其设置为false。使用此条件testCondition?name:place，如果 testCondition 为false，则在v模型中返回 place ，但如果 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}} < / p>

实际结果：如果 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"

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

2 个答案: