1

O problema:

Estou desenvolvendo um site que possui um feed com publicações, cada publicação tem comentários. Quando clico no botão de comentários da publicação, preciso carregar um modal preenchido com os comentários e a publicação.

Essa parte eu consigo fazer, só não sei como utilizar a função watch para o modal reagir a alteração dos dados, como por exemplo, ao comentar na publicação (no modal), o observador(watch) adiciona o comentário no mesmo.

Obs: Eu ja tentei utilizar o watch, mas como o modal só é preenchido no momento que o usuário clica no botão de comentários, não sei como "inicializar" o observador vazio.


De onde vem os dados:

Os posts estão na store, ao clicar em comentários, chamo uma função que passa o post para store e abro o modal com os comentários e a publicação:

Função que coloca o post clicado na store:

setOnCommentPost: function(post){
            this.$store.commit('setOnCommentPost',post);
            $("#commentPost").modal('show');
        }

Store:

state:{
    posts:{},        //Todos os posts do feed
    onCommentPost:{  //Post que esta atualmente no modal de comentários
        user:{},     //Usuário que postou
        comments:{}
    }
}

Script do Componente Comentários que está dentro do componente modal:

props:['action','method','user_auth'],
data: function(){
    return{
        post:{
            user:{},
            comments:{}
        }
    }
},
watch:{
    post: function(){
        this.post.comments = this.$store.getters.getOnCommentPost.comments
        this.post = this.$store.getters.getOnCommentPost
        this.post.user = this.$store.getters.getOnCommentPost.user
        this.post.likes = this.$store.getters.getOnCommentPost.likes
    }
}
2
  • O Modal é um componente? Ou um componente isolado typo jQuery? Se sim ele deve ir buscar à store os dados e a reactividade do Vuex resolve o resto... podes mostrar o código do Modal?
    – Sergio
    Commented 26/12/2018 às 20:05
  • O modal é um componente. Adicionei o código do componente de comentários(que fica no slot do component modal)
    – Lindomar
    Commented 27/12/2018 às 1:04

1 Resposta 1

0

Por padrão, a função watch observa modificações em um objeto em um nível mais "alto", ou seja, ela não observa modifições internas no objeto.

Sendo assim, se você tem o objeto post e troca ele para algum outro valor, o watcher vai identificar as modificações, porém, no seu caso você modifica os valores internos do objeto post.comments.

Então para o seu watcher funcionar você deve adicionar a propriedade deep: true da seguinte maneira

watch: {
  post: {
    deep: true,
    handler() {
      this.post.comments = this.$store.getters.getOnCommentPost.comments
      this.post = this.$store.getters.getOnCommentPost
      this.post.user = this.$store.getters.getOnCommentPost.user
      this.post.likes = this.$store.getters.getOnCommentPost.likes
    },
  },
},

Assim ele passa a observar modificações "internas" no objeto também.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .