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

Question

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.

for example, If this were pure js, I would just do [ if(myvalue<=0) {$("id").val("");} else{$("id").val(myvalue);} What I need is to have the variable paragraph.RCBulletinNumber without any modification, but if its input is 0 or less leave it empty (Just the frontend, the input, without touching the variable). — Hex
– Hex, Commented Jun 18, 2019 at 1:53

tony19 · Accepted Answer · 2022-07-15 01:18:04Z

2

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

edited Jul 15, 2022 at 1:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 18, 2019 at 3:08

Tim Wickstrom

5,7114 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related