0

私のページには、data.qty、data.price、data.total などの入力がいくつかあります
。数量または価格が更新されたときに合計を更新するウォッチ機能があります。
console.log(data.value.total) を見ると、たとえば 40 になりますが、入力の値が異なります。
正確には、1 を入力した場合は更新せず、続けて 2 (12) を入力した場合、合計は前の入力 (1) で更新されます... 

<v-row dense>
            <v-col cols="4">{{$tc('Purchase')}}</v-col>
            <v-col cols="2">
              <input v-model="data.quantity" type="text" class="pdg-input" />
            </v-col>
            <v-col cols="2">
              <input v-model="data.price" type="text" class="pdg-input" />
            </v-col>
            <v-col cols="2">
              <input v-model="data.total" type="text" readonly class="pdg-input" />
            </v-col>
          </v-row>

...

watch(
  () => data.value.quantity,
  () => {
    updatePurchaseTotal();
  }
)

...

function updatePurchaseTotal() {
...
data.value.total = data.value.quantity * data.value.price;
console.log(data.value.price) ; // prints 40
console.log(data.value.total) ; // prints 40 but different value in the field
...
}
4

2 に答える 2

0

watchこのようなプロパティを使用する必要があります。

new Vue({
  el: "#app",
  data: {
    data: {
      quantity: 4,
      price: 10,
      total: 40
    },

  },
  watch: {
    'data.quantity': function(val) {
      console.log(val);
      this.data.total = this.data.price * val;
    },
    'data.price': function(val) {
      console.log(val);
      this.data.total = val * this.data.quantity;

    }

  }

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model.number="data.quantity" type="text" class="pdg-input" />
  <input v-model.number="data.price" type="text" class="pdg-input" />
  <input v-model="data.total" type="text" readonly class="pdg-input" />
</div>

于 2020-04-21T02:30:46.157 に答える