Home > database >  Round up a number in the v-model in vuejs
Round up a number in the v-model in vuejs

Time:01-16

i want to round up this number in my input:

    <b-form-input id="amount_input" type="number"
     v-model="Math.ceil(form.contract.reward_cents / 100)"
      :state="validate(form.contract.reward_cents)"/>

I tried to do Math.ceil() but i'm getting this error enter image description here

Can anyone help me fix it?

I solved it like this:

    computed: {
        reward_cents () {
           return Math.ceil(this.form.contract.reward_cents / 100);       
        },
    }
<template>
<b-form-input id="amount_input" type="number" v-model="reward_cents"
    :state="validate(form.contract.reward_cents)"/>
</template>

CodePudding user response:

Maybe you can try to use a computed property in v-model instead of an expression.

<b-form-input id="amount_input" type="number"
     v-model="reward_cents"
      :state="reward_cents"/>

<script>
  export default {
    computed: {
      reward_cents: {
        get() {
          return this.form.contract.reward_cents;
        },
        set(val) {
          this.form.contract.reward_cents = Math.ceil(val / 100);
        }
      }
    }
  }
</script>

CodePudding user response:

you can follow:

<b-form-input 
id="amount_input" 
type="number"
:value="form.contract.reward_cents"
v-model="reward_cents"
@change="OnChange"
:state="validate(form.contract.reward_cents)"/>

data(){
    return: {
        reward_cents: 0
    }
}

methods: {
    OnChange(newVal){
        this.reward_cents = Math.ceil(newVal / 100);
    }
}
  •  Tags:  
  • Related