Как я могу получить доступ к элементам в V-For

Question

У меня есть цикл v-for, повторяющийся в массиве с именем projects.У меня есть другой массив под названием selectedProjects.Когда щелкает элемент 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: [],
    }
},

Answer 1

Для этого вы можете использовать динамические привязки классов 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)
      }

    }
  }

Answer 2

Я бы добавил ключ 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 3

Вы получили правильную идею, просто добавьте обработчик кликов и $ ref:

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

И реализацию методов:

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