Recover a component generated by a for loop in Vuejs

Question

I’m starting in Vuejs and have no idea how I can recover an element (if it were in pure JS would only store in a const and dp call by id), I’m trying to make a game Monty Hall, and what I want to do is that when the person click on a door the previous q was selected lose the selection automatically... ports are generated in a for loop on the main component

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

When the div is clicked it calls the method selected(i), this method stores the number of the new selected port and should also change a data of the port component to q the new one was selected and the previous one missed the selection...

The port component has the following data

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

When that data selected is changed to true is q the port is checked as selected by a class. So how could I change this component of the current port to true and the previous one to false, I don’t know how to pass/change this data.... I tried to put it in the port component props but as I could not recover the tb element did not work... How can I pass this data and how to recover an element (previous and current port) to make this passage? You can do it some other way?

Answer 1

Come on. First you must create a mutator method, that is, it will change the "Selected" pointer. EX:

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

At the event @click of the DIV you should call the mutator by passing the port index.

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

Still in the DIV you must pass a bind :class to change the style of the element conditionally by checking which active index:

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

Whenever the variable selected change value DOM will be rendered with the element containing the index i equal to selected adding the class doorSelected to that element and by removing from the above

I hope I’ve helped :)