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

问题描述

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

谁能看到我做错了什么？

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>

解决方法

事实证明这是一个基本的逻辑缺陷 - 当绑定值为 false 时，我正在返回函数之外，而不是根据绑定值设置 'disabled' 属性。

更正后的代码是：

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;