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?