Как я могу переключить класс с помощью v-bind только на этот элемент в VueJs

Question

У меня есть нижняя панель навигации для моего приложения. Эта навигация содержит 4 значка, каждый из которых при нажатии изменяет отображаемый вид. Я хочу, чтобы значок, который выбран, изменился с белого на красный. Я подумал, что простой способ сделать это - переключить класс .active, когда выбран значок в навигации. В настоящее время я написал некоторый код, который переключает класс active. Однако, это переключает все элементы списка, и мне нужно просто изменить этот элемент, а не остальные. Плюс первый элемент списка должен быть установлен как активный по умолчанию. Есть ли способ сделать это?

Мой компонент навигации выглядит следующим образом;

<li v-on:click="active = !active" v-bind:class="{active: active}">
    <router-link to="/pageOne">
        <i>Icon 1</i>
    </router-link>
</li>
<li v-on:click="active = !active" v-bind:class="{active: active}">
    <router-link to="/pageTwo">
        <i>Icon 2</i>
    </router-link>
</li>
<li v-on:click="active = !active" v-bind:class="{active: active}">
    <router-link to="/pageThree">
        <i>Icon 3</i>
    </router-link>
</li>
<li v-on:click="active = !active" v-bind:class="{active: active}">
    <router-link to="/pageFour">
        <i>Icon 4</i>
    </router-link>
</li>

Тогда скрипт ниже этого:

<script>
export default {
  name: "PrimaryAppNav",
  data() {
    return {
      active: false
    };
  }
};
</script>

Answer 1

Вот еще одно решение помимо добавления обработчика событий click для обработки переключения класса active.

Вы можете определить метод под вашим PrimaryAppNav, который будет проверять текущий активный маршрут маршрута и возвращает логическое значение.

Таким образом, вам не нужно сохранять текущий переключенный маршрут в состоянии вашего компонента как то, что вы в данный момент делаете со свойством active.

<li v-bind:class="{ active: isActivePath('/pageOne') }">
    <router-link to="/pageOne">
        <i>Icon 1</i>
    </router-link>
</li>
<li v-bind:class="{ active: isActivePath('/pageTwo') }">
    <router-link to="/pageTwo">
        <i>Icon 2</i>
    </router-link>
</li>
<li v-bind:class="{ active: isActivePath('/pageThree') }">
    <router-link to="/pageThree">
        <i>Icon 3</i>
    </router-link>
</li>
<li v-bind:class="{ active: isActivePath('/pageFour') }">
    <router-link to="/pageFour">
        <i>Icon 4</i>
    </router-link>
</li>

А под вашим PrimaryAppNav methods имуществом:

isActivePath(path) {
  return this.$route.path === path;
}

Answer 2

Может быть так:

<template>
<li @click="toggleActive('pageOne')" :class="{active: active === 'pageOne'}">
    <router-link to="/pageOne">
        <i>Icon 1</i>
    </router-link>
</li>
<li @click="toggleActive('pageTwo')" :class="{active: active === 'pageTwo'}">
    <router-link to="/pageOne">
        <i>Icon 2</i>
    </router-link>
</li>
</template>

<script>
export default {
  data() {
    return {
      active: 'pageOne'
    }
  },
  methods: {
    toggleActive(page) {
      this.active = page
    }
  }
}
</script>