Как добавить текст в форму ввода с привязками данных v-модели

Question

Я могу получить данные о зарплате из своей базы данных, используя vue js вот так

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

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

   Заработная плата    

Answer 1

Вы должны использовать атрибут value вместо v-model. Затем я бы посоветовал вам сделать поле ввода readonly, чтобы предотвратить любое неожиданное поведение, которое может возникнуть, когда кто-то изменит значение.

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

Answer 2

Для этого вы должны использовать Вычисляемые свойства из Vue.