Multiple li tags, click to expand the hidden li content under the current li, and click hide again, how can vue be realized?

if you click on the first li, the p of all li will be displayed.
Click the second li other li hidden content is also expanded, how to click which li, which li hidden li content to show?

clipboard.png

clipboard.png

the code is here:

<style>
  .box_li{
    padding: 0 40px;
    font-size: 20px;
    background-color: -sharpbfbfbf;
    border: 1px solid -sharpfff;
  }
  .after_p{
    background: bisque;
  }
</style>
<template>
  <div class="box">
    <ul v-for="item in items">
      <li class="box_li" @click="toggle()">
          

{{item.text}}

</li> <li> <p class="after_p" v-show="isActive" > {{item.desc}}

</li> </ul> </div> </template> <script> export default { data(){ return{ isActive: false, items: [{ text: "one", desc: "one content", }, { text: "two", desc: "two conten" }, { text: "three", desc: "three conten" }] } }, methods: { toggle() { this.isActive = !this.isActive; } }, } </script>
Mar.28,2021

bind a variable with v-if or v-show and then control the display and hiding by assigning a (true or false) to the variable


depending on your needs, should the state of other li change when one li is expanded?
if you allow only one li to expand, put the rest away.
then you can change isActive to activeIndex,. When you click li, modify activeIndex to the current index
li contents: VMuR show = "activeIndex==index"

if you can expand more than one at the same time, you need to add a logo to each item during initialization, and modify the logo each time you click.


`data () {

        return{
            data: [],
            activeIndex: ''
        }
    }
    methods: {
        setIndex(index){
            this.activeIndex = index
        }
    }
    <div v-for="(item, index) in data">
        <li @click="setIndex(index)">
            <p v-show="index == activeIndex">{{item}}

</li> </div>`
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7b312f-16117.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7b312f-16117.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?