Why does smooth scrolling disappear when adding a menu close?

Question

Vue.js

<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" });
    },
  },

I hung on the links and closing the menu so that it closes when scrolling. But now it scrolls not smoothly, but sharply, how to change it?

Answer 1

@click="menuShow=!menuShow,goToBlock"

By adding the menuShow toggle, you've turned the v-on value from a method name into an inline expression. So goToBlock is not called now. Let's call: . Well, it would be better, of course, to make a new method (if goToBlock is really needed as a separate method, otherwise it is enough to take the menuShow switch into it), something like this:@click="menuShow = !menuShow, goToBlock($event)"

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

@click.prevent="onMenuItemClick"