I cannot add methods to the Vuejs button

Asked

Viewed 113 times

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?

vue.js

1 answer

1

I think your problem is the way you make the buttons. In practice you are generating HTML through a JS function and making "print" of it dynamically. Instead of:

 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);

uses v-for directly in the button tag in HTML

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

Also consider using computed properties to generate the button array.

Also remember that Vue is reactive. You should make HTML generate all the elements you need instead of adding them with JS functions. Otherwise the vuejs will not "know" that there is.

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.