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

Question

[Vladislav]

Задача: Изменить текст при клике 'скрыть' затем 'показать'
Код:

<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 'Показать'
            }
        }
    }

Ошибка:

Comments

[Дмитрий Беляев]

имя метода toggle и имя ключа в data совпадают

[Vladislav]

Дмитрий Беляев, вижу, как исправить? подскажите пожалуйста?

[Дмитрий Беляев]

Vladislav, переименовать либо метод, либо поле в data

[Vladislav]

Дмитрий Беляев, сработает?

[Vladislav]

Дмитрий Беляев, не сработало, ошибка, у меня одинаковые в дата и методах

Answer 1

[Andrey Vasilev]

в data toggle: falseи метод toggle=> ошибка

Comments

[Vladislav]

Andrey Vasilev не помогло, у меня иной случай, тут он и дата и в методах затесался

[Andrey Vasilev]

Vladislav, переименуй просто в дате и везде toggle. А там и где метод оставь

[Vladislav]

Andrey Vasilev, не совсем тебя понял, где переименовать, а где не трогать?

[Andrey Vasilev]

Vladislav, да смотри.
У тебя в data есть toggle
И у тебя есть метод toggle.
По сути ты когда захочешь обратиться к методу, ты напишешь @click='toggle'
И вот что делать ей? Посмотреть на переменную в дате или вызвать функцию? Ведь названия одинаковые

[Vladislav]

Andrey Vasilev, ты как-то запутанно говоришь :) поможешь проще пожалуйста объяснить где toggle менять, а где оставить?

[Andrey Vasilev]

Vladislav, меняешь в data

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 // вместо toggle напиши toggle1, например
                
            }

        
        },

Следовательно

<div class="portfolio__hidden"  v-if="toggle1"> // уже поменял

и тут

<button class="portfolio__dropdown-btn learn-more" @click="toggle1 = !toggle1" > // уже поменял

[Vladislav]

Andrey Vasilev, а в методах что указать? Там же изначально toggle функция клика? Ты же клик поменял на toggle1и значит в методы toggle1 надо записать? Это просто переименование, дата и метод так и останутся с одним именем toggle1

[Andrey Vasilev]

Vladislav, метод - не может называться как переменная в Data()
понимаешь?
Не может быть в Data переменная toggle и метод с названием toggle. Они никак друг от друга не зависят и зависеть не могу.

[Andrey Vasilev]

Vladislav, ещё раз на примере:
v-if="toggle" вот так по сути сюда вставляется переменная toggle НО есть же ещё и метод toggle, который может вернуть true или false. Как обработчик поймет то? что ему вставить? переменную или значение, которое вернула функция.

[Vladislav]

Andrey Vasilev, в vif toggle или toggle1 вставить?

[Andrey Vasilev]

Vladislav, toggle1

[Vladislav]

Andrey Vasilev, попробую и сообщу

[Vladislav]

Andrey Vasilev, такой вариант работает

<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="toggle1">
                <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="toggle1 = !toggle1">
            <span class="circle" aria-hidden="true">
              <span class="icon arrow"></span>
            </span>
            <!-- <span class="button-text">{{btn}}</span> -->
            <!-- <span class="button-text">Смотреть больше</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'
                    },
                ],

                // btn: 'Показать',
                toggle1: 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.toggle1) {
                return 'Скрыть'
            }
            
            return 'Показать'
            }
        }

    }
</script>

<style>
.portfolio__hidden {
  -webkit-transition: height 0.5s ease;
  -o-transition: height 0.5s ease;
  transition: height 0.5s ease;
  overflow: hidden;
}

.portfolio__hidden:not(.active) {
  display: none;
}
</style>

НО не работает анимация в методе toggle при клике, поскольку она привязана была к кнопке

[Andrey Vasilev]

Vladislav,

<button class="portfolio__dropdown-btn learn-more" @click="toggle = !toggle" >

Значит тут, наверное, указано что-то не то, может быть:
@click="toggle"?

[Vladislav]

Andrey Vasilev,

<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">{{btn}}</span> -->
            <!-- <span class="button-text">Смотреть больше</span> -->
            <span class="button-text">{{btnText}}</span>


        </button>

поменял , не работает

[Vladislav]

Andrey Vasilev, вот рабочий код анимации, но не менятся текст кнопки

<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">
                <div class="portfolio__wrap-hidden">
                    <!-- <v-portfolio-item 
                    v-for="work in portfolio"
                    :key="work.id"
                    :portfolio_data="work"
                    /> -->
                    <v-portfolio-item-hidden 
                        v-for="workHidden in portfolioHidden"
                        :key="workHidden.id"
                        :portfolio_data_hidden="workHidden"
                    />
                </div>
            </div>
        </div>
        <button class="portfolio__dropdown-btn learn-more" @click="toggle">
            <span class="circle" aria-hidden="true">
              <span class="icon arrow"></span>
            </span>
            <!-- <span class="button-text">{{btn}}</span> -->
            <!-- <span class="button-text">Смотреть больше</span> -->
            <span class="button-text">{{btnText}}</span>


        </button>


 


    </section>
</template>

<script>
    import vPortfolioItem from './v-portfolio-item'
    import vPortfolioItemHidden from './v-portfolio-item-hidden'


    export default {
        name: 'v-portfolio',
        components: {
            vPortfolioItem,
            vPortfolioItemHidden
            
        },
 
        data() {
            return {
                portfolio: [
                    {
                        image: 'med-clinic.jpg',
                        id: '1'
                    },
                    {
                        image: 'savanna.jpg',
                        id: '2'
                    },
                    {
                        image: 'bedroom-market.jpg',
                        link: 'https://bedroom-market.000webhostapp.com/',
                        id: '3'
                    },
                    {
                        image: 'fish-market.jpg',
                        id: '4'
                    },
                    {
                        image: 'music-arsenal.jpg',
                        id: '5'
                    },
                    {
                        image: 'build-home.jpg',
                        id: '6'
                    },
                ],

                portfolioHidden: [
                    {
                        image: 'mosteo.jpg',
                        link: '',
                        id: '1'
                    },
                    {
                        image: 'medical-expres.jpg',
                        link: '',
                        id: '2'
                    },
                    {
                        image: 'kamen.jpg',
                        link: '',
                        id: '3'
                    },
                    {
                        image: 'market-sale.jpg',
                        link: '',
                        id: '4'
                    },
                ],

                // btn: 'Показать',
                // toggle1: 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.toggle1) {
                return 'Скрыть'
            }
            
            return 'Показать'
            }
        }

    }
</script>

<style>
    .portfolio__hidden {
    -webkit-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    transition: height 0.5s ease;
    overflow: hidden;
    }

    .portfolio__hidden:not(.active) {
    display: none;
    }
</style>