Javascript 预填充的表单输入元素不'；当提交btn被禁用时，不接受第一次输入

我有一个表单和一个输入元素，它通过

：value=“something”

获取默认值。我希望在以下情况下禁用此表单的“提交”按钮：

输入的值是错误的

或者，输入值与默认值相同

我的问题：

当我第一次单击输入（并且submit btn被禁用）并键入单个内容时，输入元素在视觉上没有变化，但我可以在控制台中看到它的值发生了变化，submit按钮不再被禁用

似乎我无法更改输入值，除非未禁用此提交按钮。但是，如果我去掉了我的

@输入

，那么我就能够很好地输入这个输入。所以，我猜我的事件处理程序有问题

我一直找不到关于我的问题的帖子，也很难想象谷歌到底有什么问题，因为这个问题对我来说太奇怪了

当输入与旧值匹配时，将正确禁用按钮。当我退格时，当输入为“a”时，它产生“apple”。不知道那里发生了什么

我的问题的最小工作示例：

<template>
    <div>
        <form>
            <input :default-value="something" :value="something" @input="onInput"/>
            <button type="submit" :disabled="isDisabled">submit</button>
        </form>
    </div>
</template>

<script>
export default {
    name: "test",
    data () {
        return {
            something: "apple",
            isDisabled: true
        }
    },
    methods: {
        onInput (event) {
            console.log("Current value: " + event.target.value);
            console.log("Default value: " + event.target.getAttribute("default-value"));
            console.log("isDisabled: " + (event.target.value === event.target.getAttribute("default-value")));
            this.isDisabled = !event.target.value || (event.target.value === event.target.getAttribute("default-value"));
        }
    }
}
</script>

提交
导出默认值{
名称：“测试”，
数据（）{
返回{
“苹果”，
isDisabled:正确
}
},
方法：{
onInput（事件）{
日志（“当前值：+event.target.value”）；
log（“默认值：”+event.target.getAttribute（“默认值”）；
log（“isDisabled:”+（event.target.value==event.target.getAttribute（“默认值”））；
this.isDisabled=！event.target.value | |（event.target.value==event.target.getAttribute（“默认值”）；
}
}
}

Vue SFC回复：

退格->输入“>

---

非常感谢您的帮助！

使用vue

computed

属性，当然，使用

v-model

而不是

：value

const-app=新的Vue({
el:“#应用程序”，
名称：“测试”，
数据（）{
返回{
defaultVal：“苹果”，
“苹果”，
};
},
计算：{
isDisabled（）{
返回this.defaultVal==this.something；
},
},
方法：{
onInput（事件）{
日志（“当前值：+event.target.value”）；
log（“默认值：”+event.target.getAttribute（“默认值”）；
console.log（“isDisabled:”+（event.target.value==event.target.getAttribute（“旧名称”））；
//现在不要这样做
//this.isDisabled=！event.target.value | |（event.target.value==event.target.getAttribute（“旧名称”）；
}
},
})

提交

use

keydown

与

input

maybekeydown相反，maybekeydown摆脱了第一个键入的键在视觉上看不到的问题，但似乎也带来了自己的问题。当我完全删除“apple”，然后键入另一个退格时，输入值变为“appl”，即使它应该保持为空。