In this example, we’ll see how we can disable an input field with a toggle or a condition. Sometimes we may want to disable an input field based on user input, button click, drop-down selection, etc.

<script setup>
import { ref } from 'vue'

const inputValue = ref('')
const isDisabled = ref(false)

const toggleDisable = () => {
    isDisabled.value = !isDisabled.value
}
</script>

<template>
<div>
    <input placeholder="Enter text" v-model="inputValue" :disabled="isDisabled"/>

    <div>
        <button @click="toggleDisable">
            Toggle disable
        </button>
    </div>
</div>
</template>
Code language: HTML, XML (xml)

In the above example, we have two reactive states. The first one, inputValue keeps the actual value of the input field. isDisabled tells whether or not the input field is disabled. We have a button on line 17 which toggles the isDisabled value. We toggle it with the toggleDisable method.

Of course, we can toggle or just disable it by using another function too. Like, for instance when the length of the inputValue reaches 10, we can disable the inputValue field by setting its value to false,

You can find a working version of the above example from my repo links below:

Codesandbox / Demo | Github