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

【问题标题】：Trying to use Select2 in a Vue Component, but options are blank?尝试在 Vue 组件中使用 Select2，但选项为空？
【发布时间】：2021-12-19 20:45:26
【问题描述】：

我有一个可以工作的 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 对象时，我看到数据的“斑点”（就像它在那里一样，但为空白）；但它只是一个带有不可见选项的选择。

我尝试了很多方法，但也许我误解了这应该如何渲染？

感谢所有帮助！

【问题讨论】：

能否提供vue和select2的版本？
Vue版本是2.6.14，Select2是4.1.0

标签： javascript html vue.js jquery-select2

【解决方案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>

【讨论】：