Vue.js 自定义指令不会动态更新状态答案

【问题标题】：Vue.js custom directive doesn't update state dynamicallyVue.js 自定义指令不会动态更新状态
【发布时间】：2021-02-28 23:07:36
【问题描述】：

我不明白为什么这个指令在模型更新时没有更新应用元素的禁用状态。

谁能看到我做错了什么？

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;

我正在应用这样的指令：

<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

【解决方案1】：

原来这是一个基本的逻辑缺陷——我在绑定值为 false 时退出函数，而不是根据绑定值设置“禁用”属性。

更正后的代码是：

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;

【讨论】：