vue.js - 如何在v-for中访问元素

我有一个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: [],
    }
},

最佳答案

我将在项目对象上添加键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)
    }
}