In Vue.js, assign a value to an input when it changes

Question

I'm working on a form that I need to complete using Vue.JS. Basically, I need to update the value of the "price_vat" field with some calculations every time an input named "price_user" is updated. Usign jquery everything is going on. Using Vue does not pass docking data to the POST method.

<div class="col-md-6" v-show="form.active">
                            <div class="form-group">
                                <label >{{__('Price')}}</label>
                                <input type="number" v-model="form.price_user" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6" v-show="form.active">
                            <div class="form-group">
                                <label >{{__('Price with VAT')}}</label>
                                <input type="number" v-model="form.price_vat" class="form-control">
                            </div>
                        </div>

Answer 1

If I understand correctly, you want form.price_vat to change every time form.price_user is changed by typing in the input.

You can do this using watch. Just add the following methods in vue:

watch:{
   'form.price_user':function():{
      this.form.price_vat += 1
    },
}

So in this code, every time form.price_user changes, you update the value of form.price_vat to 1. You can perform any operation inside the watch function.

The complete vue part will be:

data(){
  return:{
     form:{
       price_vat :'',
       price_user : '',
     }
  }
},

methods:{},

watch:{
       'form.price_user':function():{
          this.form.price_vat += 1
        },
}