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

Answer 2

您有了正确的想法，只需添加一个点击处理程序和一个$ ref：

@click="onProjectClicked(project.id)" ref="`project${project.id}`"

方法实现：

methods: {
  onProjectClicked(id) {
     this.selectedProjects.push(id)
     this.$refs[`project${id}`].$el.addClass('selected')
  }
}

Answer 3

您可以利用Vue的动态类绑定来实现此目的。假设您的每个项目都有一个名为isSelected的属性（默认情况下为false）。然后，您可以执行以下操作..

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

然后在您的脚本中..

  methods: {
    handleClick(project) {
      project.isSelected = !project.isSelected
      if (project.isSelected) {
        this.selectedProjects.push(project.id)
      } else {
        this.selectedProjects.splice(this.selectedProjects.indexOf(project.id), 1)
      }

    }
  }

如何在v-for中访问元素

3 个答案: