javascript - Vue.js 自定义指令不运行 componentUpdated Hook ？

Question

因此，当我加载 bind 钩子(Hook)触发器下面的代码时效果很好，但是，尽管组件的类必然从“中性”更改为“包含”，但 componentUpdated 钩子(Hook)似乎永远不会运行”。有人可以帮助我确定为什么即使单击带有附加指令的组件实例也永远不会运行更新吗？

HTML

<ternary-toggle display-text="Broken" v-ternary="'baz'"></th>

JS

Vue.directive('ternary', {
    bind: function(el, binding) {

        var instanceName = JSON.stringify(binding.value);
        if (this['_' + instanceName] == undefined) {
            this['_' + instanceName] = {};
        }
    },
    componentUpdated: function(el, binding) {
        var instanceName = JSON.stringify(binding.value);
        console.log(instanceName);
    }
});

var ternaryToggle = Vue.component('ternary-toggle', {
    props: ['displayText'],
    data: function() {
        return {
            state: 'neutral',
            stateTransitions: {
                neutral: 'include',
                include: 'exclude',
                exclude: 'neutral'
            }
        }
    },
    methods: {
        toggle: function() {
            this.state = this.stateTransitions[this.state]
            this.$emit('switched', this.state)
        }
    },
    template: '<span v-bind:class="state + \' btn btn-small\'" v-on:click="toggle">{{ displayText }}</span>'
});

Answer 1

这并不能完全正确地回答问题(不记得为什么这个解决方案有效)，但这是帮助@Jeppebm 的尝试。所以我不记得确切的原因，但我最终得到的结果如下:

var ternaryToggle = Vue.component('ternary-toggle', {
    props: ['displayText', 'toggleId'],
    data: function() {
        return {
            state: 'neutral',
            stateTransitions: {
                neutral: 'include',
                include: 'exclude',
                exclude: 'neutral'
            }
        }
    },
    methods: {
        toggle: function() {
            this.state = this.stateTransitions[this.state]
            this.$emit('switched', this.toggleId, this.state)
        }
    },
    template: '<span v-bind:class="state + \' btn btn-small\'" v-on:click="toggle">{{ displayText }}</span>'
});

我认为我得出的总体结论可能是放弃这项工作的自定义指令。