Question

当我更改输入框时，它会自动自动更改为原始值。看来原因是btnDisabled已更改，因为如果我删除this.btnDisabled = !this.btnDisabled;的行，则输入框将不再自动更改。我想知道为什么btnDisabled会影响输入框的值吗？

const vm = new Vue({
    el: '#app',
    data: {
        btnDisabled: false,
        total: 25,
    },
    created() {
        setInterval(() => {
            this.btnDisabled = !this.btnDisabled;
        }, 500);
    },
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
    <input type="text" v-bind:value="total">

    <button v-bind:disabled="btnDisabled">test</button>

</div>

Answer 1

这是因为Vue正在重新渲染“组件”，并且从技术上讲该值仍为25。您可以使用v-model或@input来更新数据，也可以使用v-once来防止重新呈现输入文本框会有所帮助。

const vm = new Vue({
    el: '#app',
    data: {
        btnDisabled: false,
        total: 25,
    },
    created() {
        setInterval(() => {
            this.btnDisabled = !this.btnDisabled;
        }, 500);
    },
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
    <input type="text" v-bind:value="total" v-once>

    <button v-bind:disabled="btnDisabled">test</button>

</div>

Answer 2

Steven B给出了一个答案，它可能会解决您的问题，但是我想补充一点有关确定原因的问题。问题出在one-way-binding上，我的意思是，当您使用以下代码时：

<input type="text" v-bind:value="total">

您正在通过允许用户输入输入，在DOM中引入新的单独状态。因此，当用户键入输入时，data.total属性没有更新，它仍然是25，但是DOM输入具有新值。在这种情况下，当setInterval触发并更新data.btnDisabled时，应用程序的状态将发生更改，然后VUE仅强制重新渲染组件以保持data和DOM同步。我希望使用v-model而不是:value。

输入框自动更改为原始值

2 个答案: