代码之家 › 专栏 › 技术社区 › Mav

如何访问v-for中的元素

vue-component vuejs2 vue.js

Mav · 技术社区 · 7 年前

v-for 循环遍历一个名为 projects selectedProjects . 当 project 元素,我想添加一个名为 selected 以及添加 project.id 该索引的属性 选定的项目 . 也许我把整个问题都搞错了,有没有“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: [],
    }
},

3 回复 | 直到 7 年前

Shu Yoshioka 7 年前

我会加一把钥匙 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)
    }
}

Brian Lee 7 年前

您的想法是对的,只需添加一个click处理程序和一个$ref:

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

实施方法:

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

Husam Ibrahim 7 年前

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

    }
  }

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

3 年前

Park · Vuejs道具,路径较长

3 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

3 年前

roev · 大堆来自(物体)。forEach不使用vue。js

4 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

7 年前

Ready Dev · Axios一次发出多个请求(vue.js)

7 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

7 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

7 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

7 年前

Tim · VueJS-迭代从AJAX调用返回的数据

7 年前