Estoy usando una instrucción v-for en mi código:

 <div v-for="(user, index) in users" :key="index" :presence="user.presence" class="person"> <span class="cardName h4">{{ user.name }}</span> </div>

Creé una variable people que contenía todos los elementos creados. Cuando se usaba en una función funcionaba, en otra no.

En una inspección más detallada, está vacío en la segunda función. Crearía una variable para que la usen ambos, pero la variable no se puede crear hasta que la página se muestre (probé enlaces de ciclo de vida, tampoco funcionaron).

 filterByName () { // this method worked const people = document.querySelectorAll(".person") console.log(people.length) // returned correct number console.log("Sorting by name") for (let i = 0; i < people.length; i++) { let inner = people[i].getElementsByClassName("cardName")[0].innerHTML if (inner.toUpperCase().indexOf(this.sortName.toUpperCase()) > -1) { people[i].style.display = "" } else { people[i].style.display = "none" } } }, filterByPresence() { // this didn't enter any for loops const people = document.querySelectorAll(".person") console.log(people.length) // this returned 0 if (this.filterMode == 0) { console.log("Filtering by lack of presence") for (let i = 0; i < people.length; i++) { if (!people[i].getAttribute("presence")) { people[i].style.display = "" } else { people[i].style.display = "none" } } this.filterMode = 1; } else if (this.filterMode == 1) { console.log("Filtering by presence") for (let i = 0; i < people.length; i++) { if (people[i].getAttribute("presence")) { people[i].style.display = "" } else { people[i].style.display = "none" } } this.filterMode = 2; } else if (this.filterMode == 2) { console.log("Showing all") for (let i = 0; i < people.length; i++) { people[i].style.display = "" } this.filterMode = 0 } }

Entonces, mi verdadera pregunta es: ¿Por qué uno funciona pero el otro no? ¿Cómo hago para que ambos funcionen?