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

Question

在 JavaScript 中，对象可以选择扩展值，如下所示：

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

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

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

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

我有一个像这样的文本区域

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

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

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

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

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>