У меня проблемы с v-bind, не работает

Question

Я изучаю VueJs, но меня немного смущает v-bind! У меня есть 4 кнопки, которые я хочу иметь active класс в c button, когда я нажимаю на button, но когда я нажимал на кнопку, похоже, что метод не был вызван! Например, если я нажму кнопку home, кнопка home будет иметь активный класс, который изменится на красный. Если я нажму кнопку watch, кнопка home снова станет черной, а кнопка watch станет красной. Но когда я нажал кнопку watch, все стало черным. Как я могу это исправить? Извините за мой англ sh.

вот мой vue. js файл

new Vue({
  el: "#center-element",
  data: {
    homeActive: true,
    watchActive: false,
    groupActive: false,
    gameActive: false,
  },
  methods: {
    homeActiveMethod: function () {
      this.homeActive = true;
      this.watchActive = false;
      this.groupActive = false;
      this.gameActive = false;
    },
    watchActiveMethod: function () {
      this.homeActive = false;
      this.watchActive = true;
      this.groupActive = false;
      this.gameActive = false;
    },
    groupActiveMethod: function () {
      this.homeActive = false;
      this.watchActive = false;
      this.groupActive = true;
      this.gameActive = false;
    },
    watchActiveMethod: function () {
      this.homeActive = false;
      this.watchActive = false;
      this.groupActive = false;
      this.gameActive = true;
    },
  },
});

html

<ul class="navbar-nav nav nav-tabs mx-auto text-center" id="center-element">
                <li class="nav-item">
                    <a href="#" class="nav-link" style="border: none;">
                        <button v-on:click="homeActiveMethod" class="btn" v-bind:class="{active: homeActive}" 
                        id="center-btn-nav">
                            <i class="fas fa-home"></i>
                        </button>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" style="border: none;">
                        <button v-on:click="watchActiveMethod" class="btn" v-bind:class="{active: watchActive}"
                         id="center-btn-nav">
                            <i class="fas fa-play"></i>
                        </button>
                    </a>   
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" style="border: none;">
                        <button class="btn" id="center-btn-nav">
                            <i class="fas fa-users"></i>
                        </button>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" style="border: none;">
                        <button class="btn" id="center-btn-nav">
                            <i class="fas fa-gamepad"></i>
                        </button>
                    </a>
                </li>
            </ul>

css

.active{
    color: red;
    border-bottom: 5px;
    border-bottom-style:solid;
    border-bottom-color: red;
}

Answer 1

В Vue теги <a> использовать не нужно. Удалите их, и это, вероятно, сработает.

Кстати, вы можете значительно сократить объем кода в вашем Vue компоненте, используя единственную переменную для текущей активной ссылки:

  data: {
    activeLink: ""
  },
  methods: {
    setActiveLink(activeLink) {
      this.activeLink = activeLink;
    }
  },

<button v-on:click="setActiveLink('home')" class="btn" v-bind:class="{active: activeLink === 'home'}" id="center-btn-nav">

Я бы также предложил сгенерировать ваши теги <li> с помощью директивы v-for.