Prepopulated form input element doesn't accept first input when submit btn is disabled

user_8088388 0
Viewed 66

I have a form and a input element that gets a default value via :value="something". I want the submit button for this form to be disabled if

  1. The input's value is falsey
  2. Or, the input's value is the same as the default value.

My problem:

When I first click on the input (and the submit btn is disabled) and type a single thing, the input element doesn't change visually but I can see in the console that its value changed and the submit button no longer becomes disabled.

It seems as if I can't change the value of the input unless this submit button isn't disabled. However, if I get rid of my @input, then I'm able to type into this input fine. So, my guess is that it's something wrong with my event handler.

I've been unable to find a post with my problem, it was also hard to think of what exactly to google since this problem is so strange to me.

When the input matches the old value, it correctly disables the button. When I backspace when the input is 'a' it produces 'apple'. Not sure what's happening there.

Minimal working example of my problem:

<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

Console when I type backspace->backspace->e into input

Help very much appreciated!

vue-component vue.js html javascript
1 Answers

Use vue computed property and of course, use v-model rather :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>

user_12920500
Related