vue2，注意不要触发

Question

我在Laravel项目工作，我的前线是Vue 2。

我尝试呈现一个由用户更改的输入表单，并在用户更改任何内容后触发。

我试图将我的react应用程序复制到Vue，并希望使用useEffect钩子作为触发器。

数据: loanTypingDetails改变了，而手表中的函数不触发(console.log .)

模板

<form className="details-loan-input">
    <h4>
        <input
            type="number"
            name="loanAmount"
            min="10000"
            :value="loanTypingDetails.loanAmount"
            max="10000000"
            step="10000"
            @change="handleInputChange"
            required="{true}"
        />
        <span>סכום</span>
    </h4>
    <h4>
        <input
            type="number"
            name="loanPeriodYears"
            min="1"
            :value="loanTypingDetails.loanPeriodYears"
            max="50"
            step="0.5"
            @change="handleInputChange"
            required="{true}"
        />
        <span>תקופת הלוואה בשנים</span>
    </h4>
    <h4>
        <input
            type="number"
            name="annualInterest"
            :value="loanTypingDetails.annualInterest"
            min="5"
            max="50"
            step="0.5"
            @change="handleInputChange"
        />
        <span>ריבית שנתית</span>
    </h4>
    <h4>
        <input
            type="date"
            name="loanStartDate"
            :value="loanTypingDetails.loanStartDate"
            @change="handleInputChange"
            required="{true}"
        />
        <span>תאריך תחילת הלוואה</span>
    </h4>
</form>

脚本

...

export default {
    data() {
        return {
            loanTypingDetails: initLoanTypingDetails,
            loanDetails: null,
        };
    },
    methods: {
        handleInputChange(e) {
            const {
                target: { name, value },
            } = e;
            if (name === "loanStartDate") {
                this.loanTypingDetails[name] = value;
            } else {
                this.loanTypingDetails[name] = Number(value);
            }
        },
    },
    watch: {
        // loanTypingDetails(newValue, oldValue) {
        //     console.log(newValue, oldValue);
        // },
        loanTypingDetails: (newValue, oldValue) => {
            console.log(newValue, oldValue);
        },
    },
};

Answer 1

默认情况下，Watch是浅的:只有当被监视的属性被分配了一个新值时，回调才会触发--它不会在嵌套的属性更改上触发。如果您希望对所有嵌套的突变触发回调，则需要使用深度监视器。

所以你可能需要把你的手表换成这样：

watch: {
    // loanTypingDetails(newValue, oldValue) {
    //     console.log(newValue, oldValue);
    // },
    loanTypingDetails: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
      },
      deep: true
    }
}