0

Estou começando em VueJS e não tenho ideia de como eu posso recuperar um elemento (se fosse em JS puro seria só armazenar em uma const e dp chamar pelo id), estou tentando fazer um jogo Monty Hall, e o q eu quero fazer é q quando a pessoa clicar em uma porta a anterior q estava selecionada perca a seleção automaticamente... as portas são geradas em um laço for no componente principal

<div class="doors">
        <div
            v-for="i in doorsAmount"
            :key="i"
            @click="selected(i)"
            :id="'door' + i"
        >
            <Door :number="i" />
        </div>
    </div>

Quando a div é clicada ela chama o método selected(i), este método armazena o numero da nova porta selecionada e também deveria alterar um dado do componente porta para q a nova fosse selecionada e a anterior perdesse a seleção...

O componente porta tem os seguintes dados

data() {
    return {
        open: false,
        selected: false,
    };
},

Quando esse dado selected é alterado para true é q a porta fica marcada como selecionada por uma classe. Então como eu poderia fazer pra alterar esse componente da porta atual pra true e da anterior pra false, não sei como passar/alterar esse dado.... tentei colocar ele no props do componente porta mas como não consegui recupera o elemento tb não deu certo... Como eu posso passar esse dado e como recuperar um elemento (porta anterior e atual) pra fazer essa passagem? Dá pra fazer de algum outro jeito?

1 Resposta 1

0

Vamos lá. Primeiro você deve criar um método mutator, isto é, que vai alterar o ponteiro "selected". EX:

methods: {
   setSelected(index) {
       this.selected = index;   
   }
}

No evento @click da DIV você deve chamar o mutator, passando o índice da porta.

<div class="doors">
    <div
            v-for="i in doorsAmount"
            :key="i"
            @click="setSelected(i)"
            :id="'door' + i"
        >
            <Door :number="i" />
    </div>
</div>

Ainda na DIV você deve passar um bind :class para mudar o estilo do elemento de forma condicional, verificando qual o índice ativo:

<div v-bind:class="{ 'doorSelected': i == selected }" ... ><Door :number="i" /></div>

Sempre que a variável selected mudar de valor o DOM vai ser renderizado com o elemento que contém o índice i igual a selected adicionando a classe doorSelected a esse elemento e removendo do anterior

Espero ter ajudado :)

4
  • 1
    Oi @isaac-bruno, o problema é q os componentes estão em arquivos diferentes... então nesse caso no meu arquivo principal eu teria q alterar o dado e a classe que pertencem a outro arquivo, o arquivo do componente porta...
    – M.F
    20/02/2021 às 13:53
  • 1
    Se eu jogar o attr e a classe para o principal, vai funcionar nesse caso... Mas e se eu não puder fazer isso? Como eu posso manipular dds e chamar metodos do arq de um outro componente? Tentei colocar o metodo setSelected(idx) no arq porta e usar ele no principal, aparece no console q o metodo não foi declarado... Da pra fazer essa manipulação em arqs diferentes? E se não der, vc tem alguma ideia pra contornar essa situação? Valeu mesmo ;)
    – M.F
    20/02/2021 às 14:12
  • 1
    Nos casos em que você vai usar componentes é só repassar os atributos (class, selected) via bind para os componentes filhos, a partir do componente principal. Vê esse artigo aqui: medium.com/@kevinbreaker/… 21/02/2021 às 15:20
  • Funcionou. Agora peguei a logica do Vue. Valeu
    – M.F
    24/02/2021 às 12:54

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 .