Почему скрипт не работает в хроме?

Павел, 1201 все верно, опечатался я, а что с условием не так?

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

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>

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

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>

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

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

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 при клике, поскольку она привязана была к кнопке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать стиль шапки в одном компоненте одним, а в другом компоненте другим?

В каком файле прописывать цикл?

Как сделать стиль шапки в одном компоненте одним, а в другом компоненте другим?

0xD34F а что он вернет? как прописать именно для v-header.vue?

Как сделать анимацию фэйдом при смене компонента?

h4mpy более менее похоже, но спасибо, не подскажешь атрибут name и mode в transition что значит?

Не работает скрипт в роутах Vue.js?

h4mpy, при смене темплейта будет простая анимация через opacity, то есть кликнул, например на меню Обратная связь и фэйдом происходит анимашка появления всего тэмплата, как это реализовать, класс уже заготовлен осталось только при клике меню добавлять его

Как посадить Vue.js на WordPress?

Видел эту статью, такое не катит, может видеоурок есть какой нибудь? На Ютубе ничего дельного не нашёл

Что делает $emit во Vue.js?

Pavel Shvedov, понял, спасибо

Что делает $emit во Vue.js?

Алексей Ярков, всегда надо эмитить когда создаешь новое событие, например клика по кнопке, где результатом всплывает попап?