Vuejs中未刷新字段

Question

我的页面上有几个输入，data.qty，data.price，data.total，...
我有一块手表 function 在数量或价格更新时更新总数。
如果我观看 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

您不需要使用手表 function，因为您使用的是双向绑定。 您也不应该将 v-model 用于总字段，因为您实际上并没有在其中输入任何值。 这就是计算属性可用的原因。

import { computed } from @vue/composition-api

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

要使用：

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

不要忘记返回计算的属性。 有了这个，您只需调用total就可以在组件中使用 total ，并且它应该在其他条目发生更改时自动更新。

如果您想压缩您的计算属性，因为它们匹配，您可以返回 object

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

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

有了这个，您将能够将properties计算属性作为 object 在您周围的组件中使用

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>