加载页面后，如何声明我的VUE变量？

Question

我在代码中使用v-for语句：

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

我创建了一个保存所有创建元素的变量People。当在一个函数中使用时，它在另一个功能中起作用。

在进一步检查时，它在第二个功能中为空。我将创建一个两者都可以使用的变量，但是在页面渲染之后才能创建该变量（我尝试了生命周期挂钩，它们也无法正常工作）。

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
    }
}

因此，我真正的问题是：为什么一个工作，而不是另一个工作，我该如何使他们俩工作？

Answer 1

我认为您需要提供有关如何调用这两个功能的更多信息。从理论上讲，它们只能在

顺便说一句，由于您通过用户创建了这些元素，为什么不使用this.users而不是const People并使用V-Show控制显示样式？如果此user不在您正在处理的组件中，则可以考虑使用道具或提供/注射或pinia/vuex。直接操作文件可能不是一个不错的选择。