CODEWITHSUNDEEP
javascripthtmlcssvue.jsvue-component
Shawn
Shawn

Reputation: 77

Show/Hide div in a rendered list with Vue

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!

Upvotes: 1

Views: 1915

Answers (1)

tao
tao

Reputation: 90013

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:

  • you can't have more than one root HTML element in Vue2 components (technically, you can, but you'd need to use a render function - let's say it gets complicated fairly quickly)
  • I only wrote what you need to change, not the entire component.
  • as @hamid-davodi has rightly pointed out in his comment, you currently have times defined in both data and props. You need to rename one of them (vue should warn you about it).

Upvotes: 2

Related Questions