vuejs 中的字段未刷新

Question

我的页面上有几个输入，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
...
}

Answer 1

You do not need to use the watch function since you are using two way bind. You also should not use v-model for the total field since you are not actually entering any value in there. This is why computed properties are available.

import { computed } from @vue/composition-api

因为您使用的是组合 api 然后它应该会正常更新

使用：

  setup(){
     const total = computed(() => {
        return data.value.quantity * data.value.price
      })
      return { total }
     }

不要忘记 return 计算的属性。有了这个，您将能够通过调用 total 在您的组件中使用总计，并且它应该在其他条目更改时自动更新。

如果你想压缩你的计算属性因为它们匹配你可以 return 一个对象

 setup(){
        const properties = computed(() => {
            return {
                   total: data.value.quantity * data.value.price
                   margin: other_function()
                   }
          })
          return { properties }
         }

您可以选择先调用该函数并将结果附加到一个键作为它的值，而不是像我上面指定的那样在对象中调用它（作为它的值）

有了这个，你将能够使用 properties 计算属性作为你周围组件的对象

Answer 2

你应该这样使用 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>

vuejs 中的字段未刷新

Field not refreshed in vuejs

vue.js

vuetify.js

vue-composition-api