你如何在 Vue 中条件绑定 v-model？答案

【问题标题】：How do you conditional bind v-model in Vue?你如何在 Vue 中条件绑定 v-model？
【发布时间】：2020-06-27 10:46:17
【问题描述】：

在 JavaScript 中，对象可以像这样可选地传播值：

const payload = {
  name: "Joseph",
  ...(isMember && { credential: true })
};

在 React 中，JSX 可以像这样可选地传递 props：

<Child {...(editable && { editable: editableOpts })} />

现在在 Vue 中，如何实现可选的v-model？

我有一个这样的文本区域

<template>
  <textarea v-model="textValue"> <!-- How can I optional bind v-model? -->
</template>

如何实现可选绑定v-model？

我想这样做是因为我想在发生错误时在该文本区域上显示警告。

发生错误时，textarea 显示警告并清除输入（v-model）

【问题讨论】：

你尝试过 v-bind 的条件语法吗？ v-model="{ vModelProperty: condition }" 我不知道它是否会起作用，但它可能
我想要可选绑定 v-model。

标签： javascript reactjs vue.js

【解决方案1】：

正确的方法是使用计算变量的get和set属性

<template>
  <textarea v-model="compVal" />
</template>

<script>
export default {
  data () {
    return {
      valueTrue: 'hello',
      valueFalse: 'bye',
      selected: false
    }
  },
  computed: {
    compVal: {
      get () {
        if (this.selected) {
          return this.valueTrue
        } else {
          return this.valueFalse
        }
      },
      set (val) {
        if (this.selected) {
          this.valueTrue = val
        } else {
          this.valueFalse = val
        }
      }
    }
  }
}
</script>

【讨论】：

【解决方案2】：

我认为这样的事情会为你解决问题

<template>
  <textarea v-if="hasError" :value="textValue">
  <textarea v-else v-model="textValue">
</template>

【讨论】：

我认为这是唯一的办法~
除非您需要在模板中使用包装器 div。

【解决方案3】：

您需要使用v-if 来检查第一个条件，如果匹配则像这样绑定模型

<template>
  <textarea v-if="something" :value="textValue">
  <textarea v-else v-model="textValue"> <!--  bind v-model here -->
</template>

或者你可以像这样使用三元运算符

<textarea v-model="textValue == 'test' ? 'ifTrue' : 'ifFalse'">

更多请参考此链接

【讨论】：

谢谢，不过这样还是绑定了v-model。我想要可选的绑定。

【解决方案4】：

你没试过三元运算符吗？

<template>
  <textarea v-model="someValue == 'test' ? 'value1' : 'value2'">
</template>

在数据中：

data(){
   return {
      someValue: "test",
      value1: "i am value 1",
      value2: "i am value 2"
   }
}

或者你可以用这样的计算属性来做到这一点：

<template>
  <textarea v-model="myModel">
</template>

computed: {
   myModel(){
      if(this.someValue == "test"){
         return "value1";
      }else{
         return "value2";
      }
   }
}

【讨论】：

谢谢，不过这样还是绑定了v-model。我想要可选的绑定。