After a prolonged absence from working with Vue JS, I find myself in the process of displaying a list of data with a button for each item. The goal is to conditionally render a component when a button is clicked.
I am wondering if there is a recommended approach by Vue for achieving this functionality. Should I be directly manipulating the DOM? The current implementation does not seem to be effective.
<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>