Limpiar <v-list-item-content> al cambiar de página

Buenas Veu Forum, ante todo me presento, Soy Abiel Delgado, Panameño y desarrollador Asp.net MVC. Mi experiencia con Veu es totalmente nueva casi nula y el conocimiento en Java Script es bastante básico pero de forma personal estoy investigando para aprender.

Tengo una duda grande ya que he buscado en numerosos lugares y no eh encontrado respuesta que me apoye.

Tengo el siguiente código:

<template>
	<div id="" class="">
		<v-list dense disabled>
			<v-subheader>Details</v-subheader>
			<v-list-item-group v-model="item" color="primary">
				<v-list-item v-for="(item, i) in activeBubbles" :key="i">
					<v-list-item-content>
						<v-list-item-title v-text="item"></v-list-item-title>
					</v-list-item-content>
				</v-list-item>
			</v-list-item-group>
		</v-list>
	</div>
</template>

<script>
export default {
	data: () => ({
		item: null
	}),
	computed: {
		activeBubbles(context) {
			return context.$store.getters.getActiveBubbles
		}
	}
}
</script>
<style></style>

Lo que necesito es que cada vez que se cambie de pagina ese texto se limpie y quede sin nada la lista.

¿Alguien podría indicarme o darme luz de como poder realizar esto?

De antemano muchas gracias por su ayuda y conocimientos!

Saludos desde Panamá!

Hola a todos Vue Forum.

Pude resolver el mismo de la siguiente manera, para limpiar el $store con respecto a un almacenado especifico en mi caso era setActiveBubbles puse en el mounted() { } de cada componente en el cual quería que se vaciara la siguiente línea de código, recordar esto va en el mounted() {}

this.$store.commit('setActiveBubbles', [])

$store: es el lugar donde almacenamos informacion de la App en el cliente.
commit: es lo cual utilizamos para darle valor a la propiedad dentro del $store.
[]: simbología de Array(Arreglo) la cual contendra la data que sera almacenada en el $store

PD:“Tal vez no sea la mejor práctica para limpiar el almacenaje de datos en el $store, estoy abierto a mejores practicas y/u opiniones.”

Hola Abiel,
Si la info que quieres limpiar es un estado local del componente basta con hacerlo desde el interior. Si la info que quieres limpiar es un estado global o que interactúa con otros de forma global, puedes limpiar el store. Así que en términos generales se ve bien, aunque yo haría un dispatch primero y luego ese action se encarga de hacer el commit ‘setActiveBubbles’ para seguir el flujo recomendado más que nada action->mutations->store.
[como no tienes llamados asíncronos en realidad da lo mismo, pero yo lo veo más ordenado :P]

Espero no haberme equivocado y a la vez haberte ayudado,
Saludos!

1 Like

Amigo, disculpa responder algo tarde! la verdad probé lo que dijiste y funciono de 10, se ve mil veces mas ordenado el código y limpio.

1 Like

genial :smiley: a seguir mejorando!

1 Like