Estoy tratando de agregar un objeto a una matriz anidada, pero no estoy seguro de cómo lograrlo usando store/vuex. No tengo problemas para actualizar la matriz de comentarios principal usando una mutación, pero estoy atascado en cómo especificar a qué comentario principal enviar el nuevo objeto de respuesta. Las mutaciones pushReply agregan la respuesta a CADA instancia de un comentario.
VUEX:
export const state = () => ({ comments: [ { id: 1, likes: 0, postDate: '12/22/2021 1:25pm', 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.`, replies: [ { id: 1, likes: 0, postDate: '12/22/2021 1:25pm', name: 'Reply One', img: '/img/avatars/image-avatar.png', post: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam a aut quis recusandae magnam tenetur porro autem minima aspernatur voluptatum`, }, ], }, ], }) export const mutations = { pushComment(state, comment) { state.comments.push(comment) }, pushReply(state, comment) { state.comments.forEach((item) => { item.replies.push(comment) }) }, }componente:
methods: { addComment() { this.isSending = true // postDate const newDate = new Date() const currentDate = newDate.toLocaleDateString('en-US') const currentTime = newDate.toLocaleTimeString([], { timeStyle: 'short', }) const createdAt = `${currentDate} ${currentTime}` setTimeout(() => { this.$store.commit('comments/pushComment', { id: this.$store.state.comments.comments.length + 1, likes: 0, postDate: createdAt, name: 'ramsesmiron', img: this.image, post: this.formValues.comment, replies: [], }) this.$formulate.reset('formAddComment') this.isSending = false }, 1000) }, },Debe especificar en qué comentario desea agregar este objeto de respuesta. Ya sea pasando la identificación del comentario a pushReply o agregando esta identificación al objeto de respuesta (como parentId ). Luego, en la función pushReply , busque el comentario por esta identificación y agregue esta respuesta.
Tienes varias formas como esta:
const state = { comments: [ { id: 1, replies: [], parentId: null, }, { id: 2, replies: [], parentId: null, }, { id: 3, replies: [], parentId: null, }, ], }; const reply = { id: 1, replies: [], parentId: 2, }; function pushReply(state, comment) { if (null === comment.parentId) return; // handle this case, maybe throw an error state.comments.find((item, i) => { if (item.id === comment.parentId) { state.comments[i].replies.push(comment); } }); } pushReply(state, reply); console.log(state);