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

Question

在JavaScript中，对象可以像以下这样选择扩散值：

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

在React中，JSX可以选择像这样的传球道具：

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

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

我有一个类似的文本区域

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

如何实现可选绑定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>

Answer 2

我认为这样的东西会对你的有用

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

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

有关更多信息，请参阅此链接

• https://forum.vuejs.org/t/conditional-v-model/17623
• https://forum.vuejs.org/t/v-model-with-conditional-binding-target/8718
• 在v模型中使用条件运算符

Answer 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";
}
}
}