尝试在 Vue 组件中使用 Select2，但选项为空？
Posted
技术标签:
【中文标题】尝试在 Vue 组件中使用 Select2，但选项为空？【英文标题】：Trying to use Select2 in a Vue Component, but options are blank? 【发布时间】：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 【参考方案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，但选项为空？的主要内容，如果未能解决你的问题，请参考以下文章
为 Vue Select2 包装器组件使用动态 AJAX URL