0

Estou enfrentando um problema. Estou adicionando botões a minha página através do v-for, porém o botão, quando clicado, não chama o método correspondente no v-on:click. Segue o código abaixo:

            for(var i = 0; i < objetoDeDados[this.jogadorEmQueEsta].palavrasPreenchidas.length; i ++){
            var button = "<button v-on:click='Qualifica("+ objetoDeDados[this.jogadorEmQueEsta].palavrasPreenchidas[i].palavra + ")' id='" + objetoDeDados[this.jogadorEmQueEsta].palavrasPreenchidas[i].palavra + "' class='buttonQualifica'></button>";
            this.botoes.push(button);
            console.log(button);
        }

Dessa forma eu adiciono os botões que desejo no vetor 'botoes'. Adiciono na tela da seguinte maneira:

<span v-for="botao of botoes" v-bind:key="botao"><span v-html="botao"></span><br></span><br>

O método a ser chamado é o seguinte:

        Qualifica(palavra){
        alert('entrou aqui');
        for(var i = 0; i < this.objetoDeDados.length; i++){
            console.log('entro no primeiro for');
            if(i == this.jogadorEmQueEsta){
                console.log('entro no primeiro if')
                for(var a = 0; a < this.objetoDeDados[i].palavrasPreenchidas.length; a++)
                    if(this.objetoDeDados[i].palavrasPreenchidas[a].palavra == palavra){
                        console.log('entro no segundo if')
                        this.objetoDeDados[i].palavrasPreenchidas[a].valida = !(this.objetoDeDados[i].palavrasPreenchidas[a].valida);
                        console.log(this.objetoDeDados[i].palavrasPreenchidas[a].valida);

                    if(this.objetoDeDados[i].palavrasPreenchidas[a].valida)
                        document.getElementById(this.objetoDeDados[i].palavrasPreenchidas[a].palavra).style.backgroundColor = '#688A08';
                    else
                        document.getElementById(this.objetoDeDados[i].palavrasPreenchidas[a].palavra).style.backgroundColor = '#DF0101';
                }   
            }
        }
    },

A String de criação do botão está correta, pois eu já printei no console. Estou achando que ele não está carregando a diretiva v-on. Alguém teria alguma sugestão?

1 Resposta 1

1

Creio que o teu problema está na forma como crias os botões. Na prática estás a gerar HTML através de uma função JS e a fazer "print" dele dinamicamente. Em vez de:

 for(var i = 0; i < objetoDeDados[this.jogadorEmQueEsta].palavrasPreenchidas.length; i ++){
            var button = "<button v-on:click='Qualifica("+ objetoDeDados[this.jogadorEmQueEsta].palavrasPreenchidas[i].palavra + ")' id='" + objetoDeDados[this.jogadorEmQueEsta].palavrasPreenchidas[i].palavra + "' class='buttonQualifica'></button>";
            this.botoes.push(button);

usa o v-for directamente na tag button no HTML

<button v-for="botao in botoes" v-bind:key="botao" @click="Qualifica(params)"> Click here </button>

Considera também usar computed properties para te gerar o array de botões.

Lembra também que o vue é reactivo. Deves fazer o HTML gerar todos os elementos que precisas em vez de os adicionares com funções de JS. Caso contrário o vuejs não vai "saber" que lá está.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .