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 >
            <div >
                <strong>Time:</strong><br>
                <h5>{{ time.date_time }}</h5>
            </div>
            <div >
                <strong>Is Reserved: </strong><br>
                <h5>{{ time.is_reserved }}</h5>
            </div>
            <div >
                <button @click="isVisible = !isVisible">Toggle Hidden Area</button>
            </div>  
            <div >
                <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!

CodePudding user response：

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 >
         <button @click="time.isVisible = !time.isVisible">Toggle Hidden Area</button>
       </div>
       <div >
         <div v-if="time.isVisible">Hidden by Default</div>
       </div>
     </div>
   </div>
</template>

Notes:

• you can't have more one root HTML element in Vue2 components (technically, you can, but you'd need to use a render function - let's just say it gets complicated fairly quickly)
• I only wrote what you have to change to make it work, 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).