Dalam Vue.js, tetapkan nilai pada input apabila ia berubah

Question

Saya sedang mengusahakan borang yang perlu saya lengkapkan menggunakan Vue.JS. Pada asasnya, saya perlu mengemas kini nilai medan "price_vat" dengan beberapa pengiraan setiap kali input bernama "price_user" dikemas kini. Gunakan jquery semuanya sedang berlaku. Menggunakan Vue tidak menghantar data dok ke kaedah POST.

<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

Jika saya faham dengan betul, anda mahu menukar form.price_user 时更改 form.price_vat setiap kali dengan menaip input.

Anda boleh menggunakan watch 来完成此操作。只需在 vue 中添加以下 methods dan itu sahaja:

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

Jadi, dalam kod ini, setiap kali form.price_user 发生变化时，您都会将 form.price_vat 的值更新为 1。您可以在 watch melakukan apa sahaja di dalam fungsi.

Bahagian vue yang lengkap ialah:

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

methods:{},

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