在Vue.js中，在輸入更改時為其分配一個值

Question

我正在努力處理我需要使用 Vue.JS 完成的表單。基本上，我需要每次更新名為「price_user」的輸入時，透過一些計算來更新「price_vat」欄位的值。 Usign jquery 一切都在進行。使用 Vue 不會將對接資料傳遞到 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

如果我理解正確的話，您希望每次透過在輸入中鍵入來更改 form.price_user 時更改 form.price_vat 。

您可以使用 watch 來完成此操作。只需在 vue 中加入以下 methods 即可：

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

因此，在這段程式碼中，每次 form.price_user 發生變化時，您都會將 form.price_vat 的值更新為 1。您可以在 watch 函數內執行任何動作。

完整的 vue 部分將會是：

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

methods:{},

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