如何访问 v-for 中的元素

Question

我有一个 v-for 循环遍历名为 projects 的数组。我有另一个名为 selectedProjects 的数组。单击 project 元素时，我想向该特定元素添加一个名为 selected 的 class，以及添加 project.id 属性该索引为 selectedProjects。也许我对整个问题的理解是错误的，有没有 "vue" 方法来实现这个？

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

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

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

以及方法实现：

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

Answer 2

您可以使用 Vue 的动态 class 绑定来实现这一点。假设您的每个项目都有一个名为 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)
      }

    }
  }

Answer 3

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

如何访问 v-for 中的元素

How can I access elements in v-for

vue.js

vue-component

vuejs2