Question

我有一个非常简单的Vue js设置，我试图使用指令绑定select2。我宁愿使用模板，但由于我无法控制的原因，我实际上被迫使用asp：DropDownList，这意味着我被迫在客户端内联我的选择框。

所以我试图设置一个Vue.directive但是在执行指令之后，select2并没有被找到。由于select2已执行，原始选择框将被隐藏，最终我没有在页面上显示任何内容。

正在调试调试停止，并且控制台中没有显示错误。

        <div id="tabUserInfo">
            <input id="myid" type="text" required="required"  ref="myid" v-model="firstName" />
            <span>{{firstName}}</span>
            <select id="sel" v-select2="''" v-model="optid">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>

        </div><script type="text/javascript">
            $(document).ready(function () {
                Vue.directive('select2', {
                    bind: function (elem, fieldName) {
                        $(elem).select2();
                        debugger;
                    },
                    unbind: function (elem) {
                        debugger;
                    }
                });
                var me = "Scott";
                var vm = new Vue({

                    el: '#tabUserInfo',
                    data: { firstName: 'Scott', optid:2 },
                });
            });

    </script>

Answer 1

将挂钩从bind更改为inserted。似乎select2需要元素在DOM中才能正常工作。

Vue.directive('select2', {
  inserted: function (elem, fieldName) {
    $(elem).select2();
  },
  unbind: function (elem) {}
});

为了处理数据值的更新，需要修改指令。

 Vue.directive('select2', {
   inserted: function (elem, binding, vnode) {
     let select = $(elem)
     select.select2();
     select.val(vnode.context[binding.expression]).trigger("change")
     select.on("change", function (evt) {
       vnode.context[binding.expression] = evt.target.value
     })
   },
   update: function (elem, binding, vnode) {
     let select = $(elem)
     select.val(vnode.context[binding.expression]).trigger("change")
   }
 });

通常，vnode应该被视为只读参数，但考虑到你的情况的限制，这个指令会有所作为。您的下拉列表现在应该是这样的：

<asp:DropDownList runat="server" ID="Dropdown" v-select2="optid">

请注意，该指令的参数是要绑定的data属性。它取代了v-model。

vuejs与select 2控件缺失

1 个答案: