Tengo una matriz fileArray para contener todo el objeto de archivo en una aplicación Vue 2. Cuando actualizo una propiedad de un objeto de archivo usando this.set como se recomienda, no se volverá a procesar (para alternar la clase "activa"). Sin embargo, funcionaría si la matriz contiene un objeto normal como fileArray = [{name: "John"}, {name: "Jacob"}] pero no el objeto de archivo .
Código
<template> <div v-for="(item, index) in fileArray"> <a-card :class="item.active ? 'active' : ''"> <img :src="item.imageUrl" @click="handleSelect(index)" /> </div> </template> export default { data() { return { fileArray: [] } }, methods: { beforeUpload(file) { // Add file object into array this.fileArray.push(file) return false } }, handleSelect(index) { if (this.fileArray[index]) { // Update object property inside an array with this.$set but it won't re-render this.$set(this.fileArray[index], 'active', !this.fileArray[index].active) } } } beforeUpload(file) { // Add file object into array this.fileArray = [...this.fileArray, {...file}] return false } }, handleSelect(index) { if (this.fileArray[index]) { this.$set(this.fileArray[index], 'active', !this.fileArray[index].active) this.fileArray = [...this.fileArray] } }Por favor ayuda si experimentaste esto.
¿Este código no funciona?:
<template> <div v-for="item in fileArray"> <a-card :class="{ active : item.active }"> <img :src="item.imageUrl" @click="item.active = !item.active" /> </div> </template>Le falta un atributo :key en su elemento v-for, por lo que vue no sabe cuál de los nodos debe actualizarse. Intente agregar un hash/identificación única para pasar al atributo clave, o use el índice como solución alternativa.
<div v-for="(item, index) in fileArray" :key="item.imageUrl"> <a-card :class="item.active ? 'active' : ''"> <img :src="item.imageUrl" @click="handleSelect(index)" /> </div>Elegí imageUrl arriba porque pensé que podría ser único para cada imagen. Si no tienen identificadores únicos, también se podría usar 'índice'.
Si eso no funciona, puede forzar manualmente una actualización vinculando la clave a algo que reemplaza en cada actualización, o en la última línea de defensa, use el método en este enlace a continuación:
https://vuejs.org/v2/guide/components-edge-cases.html#Controlling-Updates