Как скрыть кнопки на главной странице vue.js?

Question

[Martovitskiy]

Помогите скрыть button-group на главной странице . Т.к. использую fullpage, не совсем понимаю как правильно решить задачу. Думаю так: если был клик @click="moveTo(0)", пробрасываю событие в родительский template и скрываю, но как быть со скроллом?

index.vue

<template>
    <div class="fullpage-container">
        <div class="page-home">
            <div class="button-group"> // пытаюсь скрыть
                <b-button-group vertical>
                   <b-button type="button" v-bind:class="[{active:index == 0}]" @click="moveTo(0)">
                </b-button>
                <b-button type="button" id="md-trigger" :class="{active:index == 1}" @click="moveTo(1)">
                </b-button>
                    </b-button>
                </b-button-group>
            </div>
            <div class="fullpage-wp" v-fullpage="opts" ref="example">
                ...
                <div class="page">
                    <logo></logo> // главная
                </div>
                <div class="page">
                    <pricelist></pricelist>
                </div>
                ...
            </div>
        </div>
    </div>
</template>
<script>
import Logo from '~/components/Logo.vue'
import pricelist from '~/components/Pricelist.vue'

export default {
  data () {
    var that = this
    return {
      index: 0,
      opts: {
        start: 0,
        dir: 'v',
        duration: 500,
        beforeChange: function (prev, next) {
             that.index = next
        },
        afterChange: function (prev, next) {
        }
      }
    }
  },
  methods: {
    moveTo (index) {
      this.$refs.fullpage.$fullpage.moveTo(index, true)
    }
  },
  components: {
    Logo,
    pricelist,
    ...
  }
}
</script>

Comments

[ой всё]

а что не так со скроллом?

[Martovitskiy]

ой всё, событие scroll занято плагином. Может определять позицию документа, и в зависимости от этого строить условие?

[ой всё]

Martovitskiy, так вы так и не объяснили, в чем проблема и какой результат вы хотите получить
"событие занято плагином" - это как?

[Martovitskiy]

ой всё, Необходимо при клике на кнопку @click="moveTo(0)" или при скролле на главную, скрывать button-group.
"событие занято плагином" - подразумевается, что на scroll уже висит обработчик. Выхода не вижу, как навешивать свой обработчик.

Answer 1

[Martovitskiy]

Вопрос решен c помощью директивы v-if

<div class="button-group" v-if=" index !== 0"> 
     <b-button-group vertical>
           <b-button type="button" v-bind:class="[{active:index == 0}]" @click="moveTo(0)"></b-button>
           <b-button type="button" id="md-trigger" :class="{active:index == 1}" @click="moveTo(1)"></b-button>
     </b-button-group>
 </div>