How do you conditional bind v-model in Vue?

Question

In JavaScript, object can optional spread value like this:

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

In React, JSX can optional pass props like this:

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

Now in Vue, how do I achieve optional v-model?

I have a textarea like this

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

How can I achieve optional bind v-model?

I want to do this because I want to show warning on that textarea when error occurs.

When error occurs, textarea shows the warning and clear the input (the v-model)

Have you tried the conditional syntax from v-bind? v-model="{ vModelProperty: condition }" I don't know if it'll work, but it might — Eggon, Mar 16 '20 at 10:21

score 13 · Accepted Answer · answered Nov 04 '20 at 14:49

13

The correct way is to use the get and set properties of computed variable

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

answered Nov 04 '20 at 14:49

Dicren

505
5
12

This is a life saving code. Thank you Dicren – AliAzra Feb 03 '23 at 10:35
I am only getting into getters and setters: When would one use the set property in this particular case? – DmnkVD Mar 19 '23 at 21:02

score 2 · Answer 2 · answered Mar 16 '20 at 10:15

2

I think something like this would do the trick for you

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

answered Mar 16 '20 at 10:15

TedMeftah

1,845
1
21
29

I think this is the only way~ – Joseph Mar 16 '20 at 10:18
4

Except you need a wrapper div inside template. – Eggon Mar 16 '20 at 10:22

score 1 · Answer 3 · edited Aug 04 '21 at 08:04

1

You need to use v-if to check first condition, if matched then bind model like this

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

Or you can use ternary operator like this

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

For more refer this links

edited Aug 04 '21 at 08:04

daniel.gindi

3,457
1
30
36

answered Mar 16 '20 at 10:26

Harsh Patel

6,334
10
40
73

Thank you, but in this way, it still binds the v-model. I want optional binding. – Joseph Mar 16 '20 at 11:10

bill.gates · Answer 4 · 2020-03-16T10:30:24.170

-2

Didnt you try the ternary operator?

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

and in data:

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

Or you can do it with computed properties like this:

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

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

edited Mar 16 '20 at 10:30

answered Mar 16 '20 at 10:24

bill.gates

14,145
3
19
47

Thank you, but in this way, it still binds the v-model. I want optional binding. – Joseph Mar 16 '20 at 11:10

How do you conditional bind v-model in Vue?

4 Answers4

Linked