Disabled attr added to button before toggling input field after click-CodePudding

I have an Add button that once clicked will toggle the visibility of an input field for the user to use. I want to disable the Add button once the user clicks on it and the input field appears. Currently, when I applied the change to disable my Add button it seems like it is disabling it before the toggle kicks in and the input field is not showing up.

This is what i have:

button.btn(data-toggle='collapse', data-target='#addNewField', @click='disableBtn($event)') Add

#addNewField.collapse
    input.form-control(type='text', v-model='inputValue'...)

disableBtn(event: Event) {
   let el = event.target as HTMLElement;
   el.querySelector("button");
   el.setAttribute("disabled", "");
}

How can I properly disable the button AFTER the toggle so the input field is showing?

CodePudding user response：

When using Vue, everything should be a state unless you know what you're doing.

What you are asking can be achieved with something like this:

<template>
  <div>
    <button @click="add" :disabled="isAdding">
      Add
    </button>

    <input v-show="isAdding" v-model="inputValue" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isAdding: false,
      inputValue: "",
    }
  },

  methods: {
    add() {
      this.isAdding = true
    }
  }
}
</script>