SlavaMaxwell
@SlavaMaxwell
HTML-верстальщик

Смена текста на кнопке Vue?

Задача: Изменить текст при клике 'скрыть' затем 'показать'
Код:
<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 'Показать'
            }
        }
    }

Ошибка: 5f2ab315e57ee682128568.jpeg
  • Вопрос задан
  • 129 просмотров
Пригласить эксперта
Ответы на вопрос 2
Nolis
@Nolis
it-гопник
в data toggle: falseи метод toggle=> ошибка
Ответ написан
@sergeyiljin
Делаю дело
let container = document.querySelector('.portfolio__hidden')

вот от этого нужно избавляться. Теряется реактивность Vue.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
27 сент. 2020, в 17:37
6000 руб./за проект
27 сент. 2020, в 16:41
12000 руб./за проект
27 сент. 2020, в 15:58
2000 руб./за проект