Weisen Sie in Vue.js einer Eingabe einen Wert zu, wenn sie sich ändert

Question

Ich arbeite an einem Formular, das ich mit Vue.JS ausfüllen muss. Grundsätzlich muss ich den Wert des Felds „price_vat“ jedes Mal mit einigen Berechnungen aktualisieren, wenn eine Eingabe namens „price_user“ aktualisiert wird. Usign jquery, alles ist los. Bei Verwendung von Vue werden keine Docking-Daten an die POST-Methode übergeben.

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