Почему исчезает плавный скролл, если добавить закрытие меню?

Question

[anton_trofimov95]

<div class="header-flex__item" @click="menuShow=!menuShow">Меню</div>
<transition name="fade">
        <div class="header-menu" v-if="menuShow">
          <nav>
            <ul>
              <li v-for="menuLink in menuLinks" :key="menuLink.name">
                <a :href="menuLink.link" @click="menuShow=!menuShow,goToBlock">{{menuLink.name}}</a>
              </li>
            </ul>
          </nav>
        </div>
      </transition>

data() {
    return {
      menuShow: false,
      menuLinks: [
        {
          name: "Особенности",
          link: "#features",
        },
        {
          name: "О компании",
          link: "#about",
        },
        {
          name: "Сравнение",
          link: "#comparison",
        },
        {
          name: "Каталог",
          link: "#catalog",
        },
        {
          name: "Галерея",
          link: "#gallery",
        },
        {
          name: "Бани внутри",
          link: "#inside",
        },
        {
          name: "Этапы",
          link: "#stages",
        },
        {
          name: "Контакты",
          link: "#contacts",
        },
      ],
    };
  },
  methods: {
    goToBlock: function (event) {
      event.preventDefault();
      const link = event.target.getAttribute("href");
      document
        .querySelector(link)
        .scrollIntoView({ behavior: "smooth", block: "start" });
    },
  },

Я на ссылки навесил и закрытие меню, чтобы при скролле закрывалось. Но он теперь скроллит не плавно, а резко, как изменить?

Answer 1

[0xD34F]

@click="menuShow=!menuShow,goToBlock"

Добавив переключение menuShow, вы превратили значение v-on из имени метода в inline-выражение. Так что goToBlock теперь не вызывается. Вызовем: @click="menuShow = !menuShow, goToBlock($event)". Ну а лучше бы конечно сделать новый метод (если goToBlock действительно нужен как отдельный метод, в противном случае достаточно унести в него переключение menuShow), как-то так:

methods: {
  goToBlock(selector) {
    document.querySelector(selector).scrollIntoView({
      behavior: 'smooth',
    });
  },
  onMenuItemClick(e) {
    this.menuShow = false;
    this.goToBlock(e.target.getAttribute('href'));
  },
},

@click.prevent="onMenuItemClick"

Comments

[anton_trofimov95]

Спасибо, думаю сработает. А что значит превратили значение v-on из имени метода в inline-выражение, можно подробнее пожалуйста?

[0xD34F]

anton_trofimov95, у вас нет привилегии получать от меня какие-то дополнительные пояснения.

[anton_trofimov95]

0xD34F, подскажите, любезнейший, простому холопу, как можно добиться привилегий от вас, сударь?