Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Vuejs] Problema para atribuir dados de uma controller para um componente

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.

2 respostas
solução!

descobri uma coisa, seu coloco no select-2 um v-if="usuarios !== ''" , o vue atrasa a renderização ate que se tenha dados no usuarios, estou tentando utilizar agora uma funcao computed para preencher o select-2

Acabei descobrindo que o v-if é uma solução porca para o que eu estava fazendo (hehehehe), portanto tenho uma solução um pouco melhor:

no componente que eu preciso re-renderizar, eu defino uma :key="chaveComponete"

defino ela no data:

chaveComponente: 0

e crio um metodo que atualiza a chave:

atualizaChave() { this.chaveComponente += 1; }

ao chamar o metodo(atualizaChave()) quando realizo uma atualização dos dados do componente o vue entende que ele tem que descartar o componente e criar um novo com os dados atualizados.

achei esta solução melhor do que o v-if.