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 回答