尝试在 Vue 组件中使用 Select2，但选项为空？

Question

我有一个可用的 Vue 组件，它当前为这样的选择呈现选项：

    <select ref="subdomain_id" name="subdomain_id" id="newEvidenceSubdomain" class="form-control" :class="{ 'is-invalid': errors.subdomain_id }" v-model="subdomain">
        <option value="none" selected disabled hidden></option>
        <option v-for="choice in subdomains" :value="choice" >[[ choice.character_code ]]</option>
    </select>

    <div class="invalid-feedback" v-for="error in errors.subdomain_id">
        [[ error ]]<br />
    </div>

我正在尝试将其转换为 Select2 元素，以便用户更轻松地使用下拉列表。

我在模板中有这个：

                          <div>
                            <p>Selected: {{ selected }}</p>
                            <select2 :subdomains="choices" v-model="subdomain">
                              <option disabled value="0">Select one</option>
                            </select2>
                          </div>

Vue 的其余部分如下所示：

<script type="text/x-template" id="select2-template">
  <select>
    <slot></slot>
  </select>
</script>

<script>
    Vue.component("select2", {
        props: ["subdomains", "value"],
        template: "#select2-template",
        mounted: function() {
            var vm = this;
            $(this.$el)
                // init select2
                .select2({ data: this.subdomains })
                .val(this.value)
                .trigger("change")
                // emit event on change.
                .on("change", function() {
                    console.log('this a thing')
                    vm.$emit("input", this.value);
                });
        },
        watch: {
            value: function(value) {
                // update value
                console.log($(this.$el))
                $(this.$el)
                    .val(value)
                    .trigger("change");
            },
      subdomains: function(subdomains) {
        // update subdomains
        $(this.$el)
          .empty()
          .select2({ data: subdomains });
      }
    },
    destroyed: function() {
        $(this.$el)
            .off()
            .select2("destroy");
    }
    });
</script>

'subdomains' 是我希望呈现的选项列表（如您在工作 HTML 版本中所见）。

当我尝试将其设为 Select2 对象时，我看到数据的“点”（就像它在那里，但空白）； 但它只是一个带有隐形选项的选择。

我已经尝试了各种各样的东西，但也许我误解了它应该如何呈现？

所有帮助表示赞赏！

Answer 1

subdomains不能直接传递给select2 ， select2的数据格式应该像{id:"", text:""} 。 以下是基于您的代码的工作版本。

 <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> </head> <body> <div id="app"> <select2 :subdomains="choices" v-model="subdomain"> <option disabled value="0">Select one</option> </select2> </div> <script type="text/x-template" id="select2-template"> <select> <slot></slot> </select> </script> <script> function select2data(subdomains) { return subdomains.map((d)=>({id:d.character_code, text:d.character_code})); } Vue.component("select2", { props: ["subdomains", "value"], template: "#select2-template", mounted: function() { var vm = this; let s2 = $(this.$el) // init select2 .select2({ data: select2data(this.subdomains), width: '200px'}) // emit event on change. .on("change", function(val) { vm.$emit("input", vm.subdomains.find((d)=>d.character_code == this.value)); }); }, watch: { value: function(value) { // update value if (value && value.character_code != this.$el.value) { $(this.$el).val(value.character_code); } }, subdomains: function(subdomains) { // update subdomains $(this.$el) .empty() .select2({ data: select2data(subdomains) }); } }, destroyed: function() { $(this.$el) .off() .select2("destroy"); } }); let subdomains = [{ "other_fields":"xxxxxxx", "character_code": "abc.com" }, { "other_fields":"oooooooo", "character_code": "efg.com" }]; let app = new Vue({ el: '#app', data: { choices:subdomains, subdomain:subdomains[0] }, watch:{ subdomain:function(newVal) { console.log('subdomain changed', newVal.character_code); } } }); </script> </body> </html>

尝试在 Vue 组件中使用 Select2，但选项为空？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-11-09 03:32:04

尝试在 Vue 组件中使用 Select2，但选项为空？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-11-09 03:32:04

解决方案1
0 已采纳 2021-11-09 03:32:04