尝试在 Vue 组件中使用 Select2,但选项为空?
Trying to use Select2 in a Vue Component, but options are blank?
我有一个工作的 Vue 组件,目前呈现出 select 的选项,如下所示:
<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 对象时,我看到 'spots' 的数据(就像它在那里,但空白);但它只是一个带有不可见选项的 select。
我已经尝试了多种方法,但也许我误解了应该如何呈现?
感谢所有帮助!
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 组件,目前呈现出 select 的选项,如下所示:
<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 对象时,我看到 'spots' 的数据(就像它在那里,但空白);但它只是一个带有不可见选项的 select。
我已经尝试了多种方法,但也许我误解了应该如何呈现?
感谢所有帮助!
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>