Ha pasado un tiempo desde que usé Vue JS y actualmente estoy intentando generar una lista de datos con un botón para cada registro. Cuando se hace clic en el botón, me gustaría renderizar condicionalmente un componente (en este caso).
¿Hay una forma aprobada por Vue de hacer esto? ¿Debería estar manipulando el DOM? Lo siguiente no parece funcionar.
<template> <div v-for="data in list"> {{ data.bar}} <button @click="handleClick"> <div v-if="dataset.loading === 'true'"> <loader/> </div> <div v-else> </button> </div> </template> <script setup> import { loader } from './components' const list = [{ foo: 'bar'}]; const handleClick = (el) => { el.dataset.loading = 'true'; setTimeout(3, () => el.dataset.loading = 'false'); }; </script>Debe usar ref en la variable de su list para que sea reactiva. Además, está accediendo a una variable de dataset de datos que no existe en su aplicación.
Esta es una forma de hacerlo, acabo de agregar datos adicionales en su list
<script setup> import {ref} from 'vue' let list = ref([{ foo: 'bar', loading: 'true'}]); const handleClick = (data) => { setTimeout(() => { data.loading = 'false' },1000); }; </script> <template> <div v-for="data in list" > {{ data.foo}} <button @click="handleClick(data)"> //you can also use a `ref` here. <div v-if="data.loading === 'true'"> Your Loader Component </div> <div v-else> Something else... </div> </button> </div> </template>También puede usar referencias de plantilla
Observación :
bar en la matriz de list . Utilice data.foo en lugar de data.bar .Sugerencias:
Se recomienda proporcionar una :key con v-for siempre que sea posible.
Agregue la propiedad de loading en cada objeto de la matriz de lista. Para que se comporte dinámicamente al establecer el valor onClick .
Demostración en vivo :
new Vue({ el: '#app', data: { list: [{ foo: 'bar', loading: false }] }, methods: { handleClick(dataIndex) { this.list[dataIndex].loading = true; setTimeout(() => { this.list[dataIndex].loading = false; }, 2000); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(data, index) in list" :key="index"> {{ data.bar }} <button @click="handleClick(index)"> <div v-if="data.loading"> Loading Start </div> <div v-else> Loading Finish </div> </button> </div> </div>