vue.jsのliの中身をdata:functionから取得したものにactiveクラスをつける

v-forを使って、data:functionから取得したリストにactiveクラスを付けたいです。

htmlのclass="nav-list-contents"の部分に-bind:classを使ってactiveクラスを付けてみましたが、
だめでした。

ご存知のかたいたらご教授いただければと思います。

sidebar.vue
1<template>
2  <div class="nav" :class="{ openMenu: menuVisible }">
3    <div class="mouseover nav-toggle" @click="sideBarToggle">
4      <a @mouseover="mouseover" @mouseleave="mouseleave">
5        <img :src="image_src" class="nav-image" />
6      </a>
7    </div>
8
9    <div id="nav-content">
10      <ul class="nav-list">
11        <li v-for="item in items" :key="item.list" class="nav-list-contents">
12          <a>
13            <router-link tag="div" :to="item.url">
14              <i :class="item.icon" />
15              {{ item.list }}
16            </router-link>
17          </a>
18        </li>
19      </ul>
20    </div>
21  </div>
22</template>
23
24<script>
25import { createNamespacedHelpers } from "vuex";
26const { mapState, mapMutations } = createNamespacedHelpers("moduleMenubar");
27import Cookies from "js-cookie";
28const hamburgerMenu = Cookies.get("openAndClose");
29
30export default {
31  data: function() {
32    return {
33      image_src: "humburger1.png",
34      items: [
35        { icon: "fa fa-fw fa-building", list: "企業管理", url: "/company" },
36        { icon: "fa fa-fw fa-user", list: "ユーザー管理", url: "/user" },
37        { icon: "fa fa-fw fa-database", list: "マスター管理", url: "/master" },
38        {
39          icon: "fa fa-fw fa-wrench",
40          list: "法対応メンテナンス",
41          url: "/legal_maintenance"
42        },
43        { icon: "fa fa-fw fa-newspaper", list: "お知らせ管理", url: "/info" },
44        {
45          icon: "fa fa-fw fa-sitemap",
46          list: "企業グルーピング",
47          url: "/grouping"
48        }
49      ]
50    };
51  },
52  computed: {
53    ...mapState(["menuVisible"])
54  },
55  methods: {
56    ...mapMutations(["sideBarToggle"]),
57    mouseover: function() {
58      if (!this.menuVisible) {
59        this.image_src = "migi.png";
60      } else {
61        this.image_src = "hidari.png";
62      }
63    },
64    mouseleave: function() {
65      this.image_src = "humburger1.png";
66    }
67  }
68};
69</script>
70
71

store.vue
1import Vue from "vue";
2import Vuex from "vuex";
3import Cookies from "js-cookie";
4import moduleUserManagement from "@/components/main/user/module.js";
5
6const moduleMenubar = {
7  namespaced: true,
8  state: {
9    menuVisible: Cookies.get("openAndClose") === "true" // 右クリックメニューを出したい場所
10  },
11  mutations: {
12    sideBarToggle(state) {
13      // const flag =
14      //   Cookies.get("pizzamanz_cookie") === "true" ? "true" : "false";
15      // 右クリックメニュー閉じるCookies.get("pizzamanz_cookie");
16      // console.log(state, flag);
17      state.menuVisible = !state.menuVisible;
18      Cookies.set("openAndClose", state.menuVisible);
19    },
20    setAllUsersInfo: function(state, value) {
21      state.allUsersInfo = value;
22    }
23  }
24};
25
26Vue.use(Vuex);
27
28export default new Vuex.Store({
29  modules: {
30    moduleMenubar: moduleMenubar,
31    userManagement: moduleUserManagement
32  }
33});
34