动态表单Vue.js检测输入更改

Question

我需要检测税收输入的变化以更新总额，但是我不知道是否有办法。

我的数据

data() {
                return {
                    generalLedgers: [{
                        particulars: '',
                        chart_account_id: '',
                        debit_amount: 0,
                        tax: 0,
                        credit_amount: 0
                    },
                    {
                        particulars: '',
                        chart_account_id: '',
                        debit_amount: 0,
                        tax: 0,
                        credit_amount: 0
                    }],
                    // selectedChartAccount: 0
                }
            }

您可以在我的数据中看到...这是一个对象数组。

<div class="row" v-for="(gl, index) in generalLedgers" :key="index">

        <div class="col-xs-1">
           <input-price label="Tax" :value="gl.tax" v-model="gl.tax"></input-price>
        </div>

</div>

我的输入价格部分

<template>
      <q-input
        type="text"
        :float-label="label"
        prefix="₱"
        v-model="displayValue"
        @blur="isInputActive = false"
        @focus="isInputActive = true"
        :disable="disabled"
      />

    </template>

        <script>
        export default {
          props: ['value', 'label', 'disabled'],
          data: () => ({
            isInputActive: false
          }),
          computed: {
            displayValue: {
              get: function () {
                if (this.isInputActive) {
                  // Cursor is inside the input field. unformat display value for user
                  return this.value.toString()
                } else {
                  // User is not modifying now. Format display value for user interface
                  return this.value.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, '$1,')
                }
              },
              set: function (modifiedValue) {
                // Recalculate value after ignoring "$" and "," in user input
                let newValue = parseFloat(modifiedValue.replace(/[^\d.]/g, ''))
                // Ensure that it is not NaN
                if (isNaN(newValue)) {
                  newValue = 0
                }
                // Note: we cannot set this.value as it is a "prop". It needs to be passed to parent component
                // $emit the event so that parent component gets it
                this.$emit('input', newValue)
              }
            }
          }
        }
        </script>

如果我添加新对象，该税收将正常运行并更新。输入时它也会更新...问题是我需要检测是否有人输入。

我有手表，但是不能用。

watch: {
          'gl.tax'(val){
              console.log('asdf')
          }
        }

我可以使用手表来检测generalLedgers是否已更改

 'generalLedgers'(val){
            let debit_amount = _.sumBy(val, function(i) { return i.debit_amount; })
            let tax = _.sumBy(val, function(i) { return i.tax; })
            let total_amount = debit_amount + tax;
            this.$store.dispatch('transactions/transactionTotalAmount', total_amount)

        }

generalLedgers可以很好地工作。唯一的问题是，尽管更新了generalLedgers，但我仍需要检测税率的变化，但是我需要检测它以便能够再次计算总金额。 TY

我的问题与此https://jsfiddle.net/gzprj5ef/1/类似 但是您需要检测input.title模型。