Vue 指令未更新其值 - Jquery 已选择

Question

我正在使用 Jquery Chosen 和 Vue。这是我的 Vue 指令：

Vue.component("chosen-select", {
    props: {
        value: [String, Array],
        multiple: Boolean
    },
    template: `<select :multiple="multiple"><slot></slot></select>`,
    mounted() {
        $(this.$el)
            .val(this.value)
            .chosen({ width: '100%' })
            .on("change", e => this.$emit('input', $(this.$el).val()))
    },
    watch: {
        value(val) {
            $(this.$el).val(val).trigger('chosen:updated');
        }
    },
    destroyed() {
        $(this.$el).chosen('destroy');
    }
});

并像这样使用它：

<chosen-select v-model="basicDetailsModel.stateID" v-validate="'required'" data-vv-as="state" :state="errors.has('stateID') ? 'invalid' : 'valid'" name="stateID">
                        <option :value="null">Please select an option</option>
                        <option v-for="(state, index) in states" :key="index" :value="state.sid">{{state.nm}}</option>
                    </chosen-select>

如果为状态分配了静态值，它会按预期正常工作，但如果我动态获取状态值，则不会使用最新值更新所选状态。它保持初始值。

我该如何解决这个问题？

编辑： 这个有效。你认为这是正确的做法吗？

Vue.component("chosen-select", {
    data() {
        return { observer: null }
    },
    props: {
        value: [String, Array],
        multiple: Boolean
    },
    template: `<select :multiple="multiple"><slot></slot></select>`,
    mounted() {
        // Create the observer (and what to do on changes...)
        this.observer = new MutationObserver(function (mutations) {
            $(this.$el).trigger("chosen:updated");
        }.bind(this));

        // Setup the observer
        this.observer.observe(
            $(this.$el)[0],
            { childList: true }
        );
        $(this.$el)
            .val(this.value)
            .chosen({ width: '100%' })
            .on("change", e => this.$emit('input', $(this.$el).val()))
    },
    watch: {
        value(val) {
            $(this.$el).val(val);
        }
    },
    destroyed() {
        $(this.$el).chosen('destroy');
    }
});

Answer 1

我不确定您是如何动态获取状态的，但是如果您使用 jQuery 来获取它们，那么我认为这是您的问题。如果非 Vue 事物（如 jQuery）发生任何变化，Vue 不会收到通知。即使情况并非如此，this 也值得一读，以了解为什么 jQuery 和 Vue 不能相处。您可以添加动态获取它们的方式吗？另外，考虑使用像 Vuetify 这样的 Vue 框架，它有一个很好的 select 控制并且完全在 Vue 中。

Answer 2

解决此问题的最简单方法就是不渲染 select，直到您可以选择使用 v-if 渲染。

<chosen-select v-if="states && states.length > 0" v-model="basicDetailsModel.stateID" v-validate="'required'" data-vv-as="state" :state="errors.has('stateID') ? 'invalid' : 'valid'" name="stateID">

您还可以尝试在组件更新时发出 chosen:updated 事件。

updated(){
  $(this.$el).trigger("chosen:updated")
},

适用于多个 selects，但神秘地不适用于单个 selects。

Vue 指令未更新其值 - Jquery 已选择

Vue Directive not updating it's value - Jquery Chosen

javascript

jquery

jquery-chosen

vue.js

vuejs2