Button disabled attribute is added before toggling the input field upon clicking

Question

Button disabled attribute is added before toggling the input field upon clicking

I am having an issue with the Add button on my webpage. When clicked, this button should reveal an input field for the user to use. However, I want the Add button to be disabled once it has been clicked and the input field appears. Right now, when I try to disable the Add button, it seems to happen before the input field is displayed.

This is the code I am currently using:

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 ensure that the button is disabled only after the input field becomes visible?

jquery typescript vue.js

Answer 1

Answer №1

Vue is a great tool for managing state, so it's recommended to use state for everything unless you have specific knowledge on when not to.

If you are wondering how to achieve a certain functionality, you can implement something similar to the following code snippet:

<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>

Answer 2

Vue is a great tool for managing state, so it's recommended to use state for everything unless you have specific knowledge on when not to.

If you are wondering how to achieve a certain functionality, you can implement something similar to the following code snippet:

<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>

Button disabled attribute is added before toggling the input field upon clicking

Answer №1

Similar questions

Search for styling cues within the text and transform them into distinct elements

Make specific attributes as non-compulsory in Typescript

Jest is having trouble locating the module that ends with ".svg?react" when using Vite in combination with React, TypeScript, and Jest

Are there any comparable options for NPM similar to Java's .war files?

Exploring the power of using refs in Vue 3 with TypeScript and the Options API

A guide to accessing parameters and defining types for customizable React and React-Native components

Utilizing Vue.js to dynamically render images within a TypeScript array

Swapping out .generateFile() within jQuery

Populate Highchart Series with JSON

What causes the typescript error in my code: The argument being passed is either a string, an array of FilterData, an array of numbers, or an array of Moments, which is not compatible with a parameter of type 'string'?

Click and release file upload

Updating an array in Vue.js without the need to reload all the data

Is there a way to dynamically exclude files from the TypeScript compiler?

Struggling to properly line up the baselines of navigation list items that are styled as circular elements using CSS

What could be preventing me from accessing global variables when using $.post in jQuery and returning a function?

Encountering a JSDOM error of "ECONNREFUSED 127.0.0.1:80" during test execution on Azure DevOps

Do you need to have typing or definition files for each JavaScript library you utilize in TypeScript?

Specify the type of nested object exclusively with string values

The 401 error code is returned when making a .NET Ajax

Strategies for navigating a table to collect individual element values