CODEWITHSUNDEEP
vue.js
Mary
Mary

Reputation: 1145

In Vue.js, how do I get an input to display something different to the model?

With reference to the following:

https://plnkr.co/edit/1mMThIpE1poiGMh98npf?p=preview

there is a simple example where the input always displays firstName.

Suppose I want the input to always display firstName, except I want the input to display Hello John when the name is John, is there a way to do this?

In other words

James = James
Mike = Mike
Jill = Jill
John = Hello John

Upvotes: 0

Views: 37

Answers (1)

Maciej Kwas
Maciej Kwas

Reputation: 6439

Instead of v-model you will have to use computed value property:

<input :value="computedName">


computed: {
    computedName: function () {
      return this.firstName == 'John' ? 'Hello ' + this.firstName : this.firstName
    }
  }

Upvotes: 1

Related Questions