поле ввода автоматически изменяется на исходное значение

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

Существует ответ по 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.

Answer 2

Это потому, что Vue переопределяет «компонент», а значение все еще технически 25. Вы можете использовать v-model или @input для обновления данных или вы можете использовать v-once, чтобы Vue не переопределял вводимый текст.коробка.

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>