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

Question

我有一个表单和一个输入元素，它通过 :value="something" 获取默认值。我希望禁用此表单的提交按钮，如果

1. 输入的值为 false
2. 或者，输入的值与默认值相同。

我的问题:

当我第一次单击输入(并且提交 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

非常感谢您的帮助!

Answer 1

使用 vue compated 属性，当然，使用 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>