I'm trying to learn Vue, and I am still quite new to it.
I have a rendered list. In each item, I have a button that I'd like to show/hide a div in that item.
I tried doing the Conditional Rendering in Vue's documentation (https://vuejs.org/guide/essentials/conditional.html), but that toggles the hidden div for every item in the list at once. I'm assuming that's because in the export data, it's returning one variable, whereas I'd need an item specific variable.
Template Code:
<template>
<div v-for="time in times">
<div class="grid-container">
<div class="grid-item">
<strong>Time:</strong><br>
<h5>{{ time.date_time }}</h5>
</div>
<div class="grid-item">
<strong>Is Reserved: </strong><br>
<h5>{{ time.is_reserved }}</h5>
</div>
<div class="grid-item">
<button @click="isVisible = !isVisible">Toggle Hidden Area</button>
</div>
<div class="grid-item">
<div v-if="isVisible">Hidden by Default</div>
</div>
</div>
</div>
</template>
Script Code:
<script>
import axios from "axios";
export default {
name: 'Times',
props: {
times: Array
},
data() {
return {
times: [],
isVisible: false
}
},
async created() {
axios
.get('http://127.0.0.1:5000/api/v1/appointments/2022/3/13')
.then(response => (this.times = response.data))
},
methods: {
}
}
</script>
Am I going the correct route with this? Any advice to get this to work would be great.
Thanks!
If you want every item to have its own isVisible prop, you can't use a global one. You'll need to assign an individual prop to each item, after you get them from the server. Example:
<script>
export default {
// ....
created() {
axios
.get('http://127.0.0.1:5000/api/v1/appointments/2022/3/13')
// mapping isVisible to each item, dynamically:
.then(response => (this.times = response.data.map(item => ({
...item,
isvisible: false
}))));
}
// ....
}
</script>
<template>
<div>
<div v-for="(time, key) in times" :key="key">
<!-- ... -->
<div class="grid-item">
<button @click="time.isVisible = !time.isVisible">Toggle Hidden Area</button>
</div>
<div class="grid-item">
<div v-if="time.isVisible">Hidden by Default</div>
</div>
</div>
</div>
</template>
Notes:
times defined in both data and props. You need to rename one of them (vue should warn you about it).