如何在v-for中访问元素

Question

我有一个v-for循环遍历一个名为的数组projects。我有另一个名为的数组selectedProjects。project单击某个元素时，我想添加一个调用selected该特定元素的类，并将该project.id索引的属性添加到selectedProjects。也许我将整个问题都弄错了，有没有“可行的”方法来实现这一目标？

<!-- The template -->
<div v-for="project in projects" class="project" @click="">
    <p><i class="fa fa-folder"></i>{{project.name}}</p>
</div>

组件的数据：

data: function(){
    return {
        projects: [...],
        selectedProjects: [],
    }
},

Answer 1

我会selected在项目对象上添加一个键。

模板将像这样

<div v-for="project in projects" class="project" :class="{selected: project.selected}" @click="select(project)">
    <p><i class="fa fa-folder"></i>{{project.name}}</p>
</div>

并添加select事件。如果selectedProjects由于某种原因需要数组，则可以有一个计算函数，而不是在数据中有两个数组。

methods: {
    select(project) {
        project.selected = true
    }
},
computed: {
    selectedProjects () {
        return this.projects.filter(project => project.selected)
    }
}