Estoy creando una página de blog simple donde a los usuarios les pueden gustar y disgustar los comentarios. Mi problema actual es que cada vez que el usuario presiona los métodos "addLike" o "subtractLike", todos los Me gusta de los comentarios se actualizan, no solo el actual en el que se hace clic.
Tienda:
export const state = () => ({ comments: [ { id: 1, likes: 0, name: 'amyrobson', img: '/img/avatars/image-amyrobson.png', post: `Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.`, }, ], }) export const mutations = { pushComment(state, comment) { state.comments.push(comment) }, addLikes(state) { state.comments.forEach((element) => element.likes++) }, subtractLikes(state) { state.comments.forEach((element) => element.likes--) }, }componente:
<button @click="addLike"> <img src="/img/icon-plus.svg" /> </button> <p class="py-3 text-primaryBlue">{{ comment.likes }}</p> <button @click="subtractLike"> <img src="/img/icon-minus.svg" /> </button> <script> export default { data() { return { reply: false, } }, }, methods: { addLike() { this.$store.commit('comments/addLikes') }, subtractLike() { this.$store.commit('comments/subtractLikes') }, }, } </script>Eso se debe a que está incrementando los Me gusta para todos los comentarios, independientemente de sus ID. Para incrementar el enlace de un comentario específico , debe pasar algún tipo de identificador que identifique su comentario. Ese identificador debe ser único: en este caso, supongamos que el campo de id es único.
Luego, en su componente deberá confirmar la mutación con este bit de información (el identificador):
<button @click="addLike(comment.id)"> <img src="/img/icon-plus.svg" /> </button> <p class="py-3 text-primaryBlue">{{ comment.likes }}</p> <button @click="subtractLike(comment.id)"> <img src="/img/icon-minus.svg" /> </button> <script> export default { data() { return { reply: false, } }, }, methods: { addLike(id) { this.$store.commit('comments/addLikes', id) }, subtractLike(id) { this.$store.commit('comments/subtractLikes', id) }, }, } </script> Luego, deberá actualizar su definición de compromiso para incluir ese identificador. Use ese identificador para encontrar el comentario cuya propiedad like desea aumentar/disminuir:
addLikes(state, id) { const foundComment = state.comments.find(comment => comment.id === id); if (foundComment) foundCommment.likes++; }, subtractLikes(state, id) { const foundComment = state.comments.find(comment => comment.id === id); if (foundComment) foundCommment.likes--; }, p/s: recuerde que los objetos en su matriz son por referencia , por lo que foundComment es simplemente una referencia al objeto de comentario original en state.comments , lo que le permite mutarlo directamente.