[Vuejs]-How to add text in input form with v-model data bindings

by

2👍

✅

You have to use the value attribute instead of v-model. Then, I would advice you to make the input field readonly to prevent any unexpected behaviour that will arise when someone changes the value.

data() {
  return {
    nasabah: {
      form: {
        salary: ''
      }
    }
  }
}
<div class="form-row">
<div class="form-group col-md-6">
   <input
     :value="formattedSalaryWithCurrency">  //use the value attribute
     readonly // make it readonly to prevent unexpected behaviour
   >
</div>
</div>
computed: { // a computed property will only re-compute when a dependency changes (in this case, this.nasabah.form.salary;)
  formattedSalaryWithCurrency() {
    return this.formatSalaryWithCurrency(this.nasabah.form.salary);
  }
}
methods: {
  formatSalaryWithCurrency(amount) {
    `Rp.${amount}`
  }
}
👤Tony

1👍

You should use Computed properties of Vue for that.

👤Nasir Rabbani

Leave a comment