Problema

Estoy construyendo un sitio web de publicaciones con un recuento de visitas. También estoy usando firebase. Agregué el recuento de vistas, por lo que si hace clic en una de las publicaciones (listas de playlists en el código), debería agregar una vista a la publicación.

Como puede ver, el recuento de vistas se agrega en la etiqueta p dentro del router-link . También se agrega en el componente PlaylistDetails . El problema es que actualiza el recuento de vistas en la etiqueta p pero no en PlaylistDetails .

Entonces, cuando haga clic en el enlace del enrutador, la etiqueta p se actualizará y lo llevará al componente de detalles de la lista de reproducción, pero allí no se actualizará.

Este es mi código:

El conteo de vistas con el botón

 <template> <div> <router-link :to="{ name: 'PlaylistDetails', params: { id: playlist.id } }" @click="handleViews" > <div> <button>test</button> <p>{{ playlist.views }}</p> </div> </router-link> </div> </template> <script> import useDocument from "../composables/useDocument"; import { useRouter } from "vue-router"; export default { props: ["playlist"], setup(props) { const { updateDoc } = useDocument("playlists", props.playlist.id); const router = useRouter(); const handleViews = async () => { const res = await updateDoc({ views: props.playlist.views++, }); // await router.push({ // name: "PlaylistDetails", // params: { id: props.playlist.id }, // }); console.log("add view"); }; return { handleViews, }; }, }; </script>

El componente Detalles de la lista de reproducción

 <p>{{ playlist.views }}</p>