CODEWITHSUNDEEP
htmlvue.jsdata-binding
M Andre Juliansyah
M Andre Juliansyah

Reputation: 127

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

I can get salary data from my database using vue js like this

salary without curency

but I want to add curency code like this but I don't know how to do it

salary with curency

here is my code for my retrieve, the field key salary is a double how to add " Rp. " in a input with vue js ??

  <div class="form-row">

      <div class="form-group col-md-6">

         <label class="col-form-label">Salary</label>
         <input type="text" class="form-control" v-model="nasabah.form.salary">

      </div>

  </div>

Upvotes: 0

Views: 1471

Answers (2)

Nasir Rabbani
Nasir Rabbani

Reputation: 100

You should use Computed properties of Vue for that.

Upvotes: 1

Tony
Tony

Reputation: 1432

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}`
  }
}

Upvotes: 2

Related Questions