Задача: Изменить текст при клике 'скрыть' затем 'показать'
Код:
<template>
<section class="v-portfolio portfolio">
<div class="container">
<h2 class="title--section">Портфолио</h2>
<div class="portfolio__wrap">
<v-portfolio-item
v-for="work in portfolio"
:key="work.id"
:portfolio_data="work"
/>
</div>
<div class="portfolio__hidden" v-if="toggle">
<div class="portfolio__wrap-hidden">
<v-portfolio-item
v-for="work in portfolio"
:key="work.id"
:portfolio_data="work"
/>
</div>
</div>
</div>
<button class="portfolio__dropdown-btn learn-more" @click="toggle = !toggle" >
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">{{btnText}}</span>
</button>
</section>
</template>
<script>
import vPortfolioItem from './v-portfolio-item'
export default {
name: 'v-portfolio',
components: {
vPortfolioItem
},
data() {
return {
portfolio: [
{
image: 'med-clinic.jpg',
id: '1'
},
{
image: 'savanna.jpg',
id: '2'
},
{
image: 'bedroom-market.jpg',
id: '3'
},
{
image: 'fish-market.jpg',
id: '4'
},
{
image: 'music-arsenal.jpg',
id: '5'
},
{
image: 'build-home.jpg',
id: '6'
},
],
toggle: false
}
},
methods: {
toggle(){
let container = document.querySelector('.portfolio__hidden')
if (!container.classList.contains('active')) {
container.classList.add('active');
container.style.height = 'auto';
let height = container.clientHeight + 'px';
container.style.height = '0px';
setTimeout(function () {
container.style.height = height;
}, 0);
} else {
container.style.height = '0px';
container.addEventListener('transitionend', function () {
container.classList.remove('active');
}, {once: true});
}
}
},
computed: {
btnText: function() {
if(this.show) {
return 'Скрыть'
}
return 'Показать'
}
}
}
Ошибка:
