'How do I remove a Quasar q-input prop on button click?

I have a quasar q-input element that I want to enable and disable at the click of a button.

I have added a button to the input using v-slot:after but I don't know how to remove the disable prop when it is clicked.

P.S. I am using Quasar + Vue 3 + TypeScript.

<template>
  <q-input
    disable
    type="text"
    autocomplete="given-name"
    label="First Name"
    v-model="firstName"
  >
    <template v-slot:after>
      <q-btn
        label="Edit"
        @click="handleClick"
      />
    </template>
  </q-input>
</template>

<script setup lang="ts">
import { ref, Ref } from 'vue';

const firstName: Ref<string | null> = ref(null);

const handleClick = () => {
  //Remove the "disable" prop from the q-input element
}
</script>
vue.jsquasar-framework


Solution 1:[1]

In VUE you must think backwards.

  1. Put in input :disable="myDisable"

  2. Create the ref myDisable in the setup and put your initial value that you need true or false

  3. In your handleClick change the value of myDisable =!myDisable

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions