¿Cómo puedo acceder a los elementos en V para

votos
2

Tengo una v-foriteración de bucle a través de una matriz llamada projects. Tengo otra matriz llamada selectedProjects. Cuando una projectse hace clic en el elemento, me gustaría añadir una clase llamada selecteda ese elemento específico, así como añadir la project.idpropiedad de ese índice selectedProjects. Tal vez voy sobre todo el mal problema, hay una manera vue para lograr esto?

<!-- The template -->
<div v-for=project in projects class=project @click=>
    <p><i class=fa fa-folder></i>{{project.name}}</p>
</div>

los datos del componente:

data: function(){
    return {
        projects: [...],
        selectedProjects: [],
    }
},
Publicado el 20/10/2018 a las 10:33
fuente por usuario
En otros idiomas...                            


3 respuestas

votos
3

Yo añadiría una clave selecteden los objetos del proyecto.

La plantilla será así

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

Y añadir selectevento. Si necesita selectedProjectsmatriz, por alguna razón, puede tener una función computarizada en lugar de tener dos conjuntos de datos.

methods: {
    select(project) {
        project.selected = true
    }
},
computed: {
    selectedProjects () {
        return this.projects.filter(project => project.selected)
    }
}
Respondida el 20/10/2018 a las 11:05
fuente por usuario

votos
2

Puede hacer uso de los enlaces de clase dinámica de Vue para lograrlo. Digamos que cada uno de sus proyectos tiene una propiedad llamada isSelected(false por defecto). A continuación, puede hacer lo siguiente ..

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

Luego, en la secuencia de comandos ..

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

    }
  }
Respondida el 20/10/2018 a las 11:05
fuente por usuario

votos
1

Que tuvo la idea de ir a la derecha, sólo tiene que añadir un controlador de clic y $ ref:

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

Y la puesta en práctica métodos:

methods: {
  onProjectClicked(id) {
     this.selectedProjects.push(id)
     this.$refs[`project${id}`].$el.addClass('selected')
  }
}
Respondida el 20/10/2018 a las 10:44
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more