Issue with Vue.js custom directive not automatically updating the state

Question

Issue with Vue.js custom directive not automatically updating the state

I'm having trouble understanding why my directive isn't updating the disabled state of elements when there is a change in the model. Can someone help me identify the issue?

import { DirectiveOptions } from 'vue';    

const disableAllDirective: DirectiveOptions = {

componentUpdated: function (el, binding) {
    if (!binding.value) return;
    const tags = ["input", "button", "textarea", "select"];
    tags.forEach(tagName => {
        const nodes = el.getElementsByTagName(tagName);
        for (let i = 0; i < nodes.length; i++) {
            (<HTMLInputElement>nodes[i]).disabled = true;
            (<HTMLInputElement>nodes[i]).tabIndex = -1;
        }
    });
}
};

export default disableAllDirective;

This is how I'm using the directive:

<div class="col-5" v-disableAll="!selectedBusinessId">
                    <div class="form-row">
                        <label class="col-1 pt-1 col-form-label-sm">Search:</label>
                        <div class="col-6 form-inline">
                            <input id="txtClientSearch" @change="searchClients" v-model.lazy="clientSearchTerm" placeholder="Facility / Client Name" class="form-control" autocomplete="off" />
                            <input id="txtClientIdSearch" @change="searchClients" v-model.lazy="clientIdSearch" v-validate="'between:1,32767'" data-vv-as="Customer Number" placeholder="Number" class="form-control number-without-spinner" autocomplete="off" type="number" />
                            <button v-on:click="searchClients" class="btn btn-outline-secondary btn-sm form-control-xsm"><i class="fa fa-search"></i></button>
                            <button v-on:click="onClearSearchClick" class="btn btn-outline-primary btn-sm form-control-xsm"><i class="fa fa-times"></i></button>
                        </div>
                        <div class="col-auto form-check form-check-inline checkbox checkbox-primary">
                            <input v-model="showInactiveClients" v-on:change="searchClients" id="chkInactive" class="form-check-input" type="checkbox" value="inActive">
                            <label class="form-check-label no-padding" for="chkInactive">Show Inactive</label>
                        </div>
                    </div>
                </div>

typescript vue-directives

Answer 1

Answer №1

After some investigation, I discovered a fundamental logic error - the function was exiting prematurely when the binding value was false, instead of correctly setting the 'disabled' attribute based on the binding value.

Here is the revised code:

import { DirectiveOptions } from 'vue';    

const disableAllDirective: DirectiveOptions = {

componentUpdated: function (el, binding) {
    const tags = ["input", "button", "textarea", "select"];
    tags.forEach(tagName => {
        const nodes = el.getElementsByTagName(tagName);
        for (let i = 0; i < nodes.length; i++) {
            (<HTMLInputElement>nodes[i]).disabled = binding.value;
            (<HTMLInputElement>nodes[i]).tabIndex = -1;
        }
    });
}
};

export default disableAllDirective;

Answer 2

After some investigation, I discovered a fundamental logic error - the function was exiting prematurely when the binding value was false, instead of correctly setting the 'disabled' attribute based on the binding value.

Here is the revised code:

import { DirectiveOptions } from 'vue';    

const disableAllDirective: DirectiveOptions = {

componentUpdated: function (el, binding) {
    const tags = ["input", "button", "textarea", "select"];
    tags.forEach(tagName => {
        const nodes = el.getElementsByTagName(tagName);
        for (let i = 0; i < nodes.length; i++) {
            (<HTMLInputElement>nodes[i]).disabled = binding.value;
            (<HTMLInputElement>nodes[i]).tabIndex = -1;
        }
    });
}
};

export default disableAllDirective;

Issue with Vue.js custom directive not automatically updating the state

Answer №1

Similar questions

Determining in Angular 8 whether a value has been altered by a user or by a method call

Associate the generic operator <T> with a FunctionConstructor

One way to consolidate multiple components in a single location without altering user-input data

Differentiating TypeScript classes is important in situations where they would normally be treated as equivalent

Display a modal dialog using HttpInterceptor

Unable to iterate over a 2D array using 'rows' in JavaScript or TypeScript

A class in Typescript that provides utility functions for managing React components

Transferring information between components using TypeScript and ReactJS via API calls

Accept an empty string as the defaultValue, but disallow it during validation using Zod, react-hook-form, and Material UI

How to Avoid Name Conflicts when Importing Modules in Angular 2?

Having difficulty in converting JSON objects into key/value pairs in Angular 7

Uncovering the origins of computed object keys in TypeScript

What's the trick to aligning the label on the material-ui text field to the right side?

Issue with argument in function overloading

Using TypeScript absolute imports from another project for standard TypeScript files and declarations at a global scope

What is the best way to specify data types for all attributes within an interface?

Issue: (SystemJS) Unable to find solutions for all parameters in $WebSocket: ([object Object], [object Object], ?)

Utilizing Angular Validators.email with the ability to accept null values

Issue with Path Alias Functionality in Bun Project Despite Accurate Configuration

Extending interfaces in Typescript is a flexible and versatile feature