After the DOM element is inserted into v-html in Vue, the effect of folding panel is realized

Time:2021-5-12

I use the native JS way, if there is a better way, comments Oh~

<template>

 <div class="content">

 <div class="content-show">

 <div class="c-title">{{datainfo.title}}</div>

 <div class="c-detail" v-html="datainfo.body" @click="toggleDetail"></div>

 </div>

 </div>

</template>

<script>

export default {

 data(){

 return{

 datainfo:{}

 }

 },

 methods:{

 toggleDetail(e){

 let items = document.querySelectorAll('.collapse-item'),

 itemWraps = document.querySelectorAll('.item_wrap');

 var el = e.target.nextElementSibling;

 if(el.classList.contains('item_wrap')){

 el.style.display = el.style.display=="none"?"block":"none";

 }

 },

 getAboutInfo(id){

 this.datainfo=''

 this.$api.getAboutPt(id).then((res)=>{

 if(res.data &&res.data.length){

 this.datainfo=res.data[0];

 this.$nextTick(()=>{

 if(id=='10'){

 let items = document.querySelectorAll('.collapse-item'),

 itemWraps = document.querySelectorAll('.item_wrap');

 itemWraps.forEach((ele, index) => {

 ele.style.display = 'none';

 });

 itemWraps[0].style.display="block";

 }

 })

 }

 })

 }

 }

}

</script>

<style lang="scss" scoped>

 .content{

 min-height: 500px;

 &.right-content{

 margin-left: 350px;

 }

 .content-show{

 color: #333;

 .c-title{

 font-size: 20px;

 padding: 30px 0;

 }

 }

 }

</style>

The code is as above

Implementation effect:
After the DOM element is inserted into v-html in Vue, the effect of folding panel is realized

The specific functions of the code are as follows:
After the DOM element is inserted into v-html in Vue, the effect of folding panel is realized

Another DOM element structure is attached
After the DOM element is inserted into v-html in Vue, the effect of folding panel is realized

Note:
The newly inserted DOM style written in < style lang = “SCSS” scoped > < / style > does not work. You can remove the scoped restriction or introduce a style sheet from main.js for style overlay.

The style is simple and can be modified as needed