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 功能,因为您使用的是双向绑定。您也不应该将 v-model 用于总字段,因为您实际上并没有在其中输入任何值。这就是计算属性可用的原因。

import { computed } from @vue/composition-api

因为您使用的是组合 API,所以它应该正常更新

要使用:

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

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

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

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

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

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

于 2020-04-21T01:29:23.757 回答
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 回答