v-for의 요소에 액세스하는 방법

v-for의 요소에 액세스하는 방법

나는 가지고 있다v-for라고 하는 어레이를 통해 반복 루프projects...라는 이름의 다른 어레이가 있습니다.selectedProjects. a의 경우project요소가 클릭되면 다음 클래스를 추가합니다.selected그 특정 요소에 대한 추가와 더불어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: [],
    }
},

키를 추가하겠습니다.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)
    }
}

올바른 아이디어입니다.클릭 핸들러와 $ref만 추가하면 됩니다.

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

또, 실장 방법:

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

이를 위해 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)
      }

    }
  }

언급URL : https://stackoverflow.com/questions/52904711/how-can-i-access-elements-in-v-for