禁用提交 btn 时，预填充的表单输入元素不接受第一个输入

Posted 2023-02-23

【中文标题】禁用提交 btn 时，预填充的表单输入元素不接受第一个输入

【英文标题】：Prepopulated form input element doesn't accept first input when submit btn is disabled

【发布时间】：2020-07-08 19:00:19

【问题描述】：

我有一个通过:value="something" 获取默认值的表单和输入元素。如果

，我希望禁用此表单的提交按钮

输入的值是假的 或者，输入的值与默认值相同。

我的问题：

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

似乎我无法更改输入的值，除非此提交按钮未被禁用。但是，如果我摆脱了我的@input，那么我就可以很好地输入这个输入。所以，我的猜测是我的事件处理程序有问题。

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

当输入与旧值匹配时，它会正确禁用按钮。当我在输入为“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>

Vue SFC REPL：https://vuep.run/2192b4fb

帮助非常感谢！

【问题讨论】：

使用 keydown 而不是 input 也许

keydown 摆脱了第一个键入的键没有在视觉上出现的问题，但似乎也引入了它自己的问题.. 当我完全删除 'apple' 然后键入另一个退格键时，输入值变为“appl”，即使它应该保持为空。

【参考方案1】：

使用 vue computed 属性，当然，使用 v-model 而不是 :value

const app = new Vue(
  el: '#app',
  name: "test",
  data() 
    return 
      defaultVal: "apple",
      something: "apple",
    ;
  ,
  computed: 
    isDisabled() 
      return this.defaultVal === this.something;
    ,
  ,
  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("old-name")));
      
      // don't do this now
      // this.isDisabled = !event.target.value || (event.target.value === event.target.getAttribute("old-name"));
    
  ,
)

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <form>
    <input :default-value="defaultVal" v-model="something" @keyup="onInput"/>
    <button type="submit" :disabled="isDisabled">submit</button>
  </form>
</div>