你如何在 Vue 中有条件地绑定 v-model？

Question

在 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 ）

原文由 xyz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

原文由 Dicren 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为这样的事情会为你做的伎俩

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

原文由 TedMeftah 发布，翻译遵循 CC BY-SA 4.0 许可协议