Vue.component("select2", {
template:
'<select v-bind:name="name" class="form-control" v-bind:multiple="multiple"></select>',
props: {
name: "",
options: {
Object,
required:true
},
value: null,
multiple: {
Boolean,
default: false
},
placehld: {
default: "Select"
}
},
data() {
return {
select2data: []
};
},
mounted() {
this.formatOptions();
let vm = this;
let select = $(this.$el);
select
.select2({
placeholder: this.placehld,
theme: "bootstrap",
width: "100%",
allowClear: true,
data: this.select2data
})
.on("change", function () {
vm.$emit("input", select.val());
});
select.val(this.value).trigger("change");
},
methods: {
formatOptions() {
this.select2data.push({
id: "",
text: "Select"
});
for (let key in this.options) {
this.select2data.push({
id: key,
text: this.options[key]
});
}
}
},
destroyed: function () {
$(this.$el)
.off()
.select2("destroy");
}
});
var app = new Vue({
el: '#app',
template: '#formulario-template',
data: {
selecionado: "",
usuarios: ""
},
methods: {
carregarDados() {
this.$http
.get("/Mensagens/Usuarios")
.then(response => {
this.usuarios = response.body;
})
.catch(() => console.log("erro obter Usuarios"));
},
isNull(e) {
return e === null ? true : false;
},
isObject(e) {
return typeof (e) === 'object' ? true : false;
},
isUndefined(e) {
return typeof (e) === 'undefined' ? true : false;
}
},
created() {
this.carregarDados();
}
})
Tentei carregar os dados da controller no formato { "1":"opcao 1", "2":"opcao 2"}, para o componente select2, mas nao funciona, o usuarios, fica null quando manda para o select, hehehe realmente nao estou entedendo.