CODEWITHSUNDEEP
vue.js
Hex
Hex

Reputation: 444

Is there anyway to set a different value for the "input" than the vue variable?

I need to change the display of a input depending on the value returned from the db for this variable: paragraph.RCBulletinNumber

I have tried the computed method, but I think this is not what I need

     computed: {

    formatRCBulletinNumber: {

        set (val){
            return this.paragraph.RCBulletinNumber;
        }

    }

},

This is my input declaration using v-model='paragraph.RCBulletinNumber':

    <div class="form-group">
        <div v-if='typeof paragraph != undefined /*/<!--&& parseInt(paragraph.RCBulletinNumber)>0 -->/*/'>
            <input type="text" style="width: 40%;" class='form-control' id="RCNumber" placeholder="RC Number" v-model='paragraph.RCBulletinNumber'>
                </div>
                    </div>

What I expect is that if the value of paragraph.RCBulletinNumber is less than or equal to 0 the input remains empty. Right now if the variable equals 0 the input is 0

But if the paragraph.RCBulletinNumber is equal to 0, the value must go to the database again, my goal is just to change the value of the input to be more userfriendly.

Upvotes: 0

Views: 1686

Answers (1)

Tim Wickstrom
Tim Wickstrom

Reputation: 5701

Simply define the getter and setter of the computed property:

computed: {
  formatRCBulletinNumber: {
    // getter
    get: function () {
      return this.paragraph.RCBulletinNumber || '';
    },
    // setter
    set: function (newValue) {
      this.paragraph.RCBulletinNumber = newValue;
    }
  }
}

And then reference the computed property on the input:

<input type="text" style="width: 40%;" class='form-control' id="RCNumber" placeholder="RC Number" v-model='formatRCBulletinNumber'>

reference: https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter

Upvotes: 2

Related Questions