0
I’m facing a problem. I’m adding buttons to my page via v-for, but the button, when clicked, does not call the corresponding method in v-on:click. Follow the code below:
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);
}
This way I add the buttons I want in the 'buttons' array. I add on the screen as follows:
<span v-for="botao of botoes" v-bind:key="botao"><span v-html="botao"></span><br></span><br>
The method to be called is the following:
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';
}
}
}
},
The Button Creation String is correct, because I already printed it on the console. I’m guessing it’s not loading the v-on directive. Would anyone have any suggestions?