Vue -Budget-Calculator-App: динамика c реквизиты, связанные с маршрутом

Question

Бюджет-калькулятор-приложение

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

Предварительный просмотр изображения:

---

Как это работает:

Я использую LocalStorage Chrome для сохранения store.state.users, как в этом примере:

  state: {
    users: [
      {
        userName: 'John',
        salary: 2000,
        leftover: 0,
        inc: [],
        exp: [],
        active: false,
      }
    ],
  }

Пока это работает. Данные хранятся в памяти, как и предполагалось. Для каждого добавленного пользователя будет создан динамический c маршрут, связанный с его users[id]

---

Где я застрял:

Я создаю такие динамические маршруты c. В компоненте Навигация. vue проверьте приведенный ниже код для 'ПРОВЕРИТЬ ЗДЕСЬ' , чтобы найти деталь в <router-link>:

<template>
  <!-- TODO: maybe remove the border-bottom -->
  <div
    id="navigation"
    class="border-bottom"
  >
    <!-- MODAL FOR CHANGE USER SETTINGS AND ADD NEW USER -->
    <UserSettingsModal />
    <nav class="navbar navbar-expand-lg">
      <a
        class="navbar-brand"
        href="#"
      >
        <button
          type="button"
          class="btn btn-primary modal-btn"
          data-toggle="modal"
          data-target="#user-modal"
        >
          <i class="fas fa-user-cog" />
          <!-- <i class="fas fa-plus position-absolute" /> -->
        </button>
      </a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon" />
      </button>
      <div
        id="navbarNav"
        class="collapse navbar-collapse"
      >
        <ul class="navbar-nav">
          <router-link to="/">
            <li>
              <a
                class="nav-link"
                href="#"
              >Home</a>
            </li>
          </router-link>
          <!-- TODO: PASS EACH USERS.ID{} TO THE HIS ROUTE, IF POSSIBLE -->
          <!-- CHECK HERE -->
          <router-link
            v-for="user in users"
            :key="user.userName"
            class="nav-item"
            :to="{ name: 'User', params: { userId: users.indexOf(user) }}"
          >
            <li>
              <a
                class="nav-link"
                href="#"
                @click="toggleActive(user.userName)"
              >{{ user.userName }}</a>
            </li>
          </router-link>
        </ul>
      </div>
    </nav>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import UserSettingsModal from './UserSettingsModal.vue';
export default {
  components: {
    UserSettingsModal
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(['users'])
  },
  mounted() {
    //TODO: this part should load the active user from state
    console.log(this.users);
  },
  methods: {
    // TODO: for this, check the todo in store
    toggleActive(userToToggleActive) {
      let usersArr = this.$store.state.users;
      console.log(userToToggleActive);

      // WAY: 1
      // let indexOf = usersArr.findIndex(user => {
      //   console.log(user.userName);

      //   user.userName == userToToggleActive;
      // });

      // WAY: 2

      for (let i = 0; i < usersArr.length; usersArr++) {
        const user = usersArr[i];
        console.log(user);


      }

      // console.log(indexOf);




      // console.log(userToToggleActive);
    }
  }
};
</script>

<style lang="scss">
#navigation {
  .navbar {
    .fa-user-cog {
      font-size: 25px;
      color: $white;
    }
    .fa-user-cog:hover {
      color: $orange;
    }
    .modal-btn {
      background-color: $dark !important;
    }
    // .fa-plus {
    //   color: #000000;
    //   top: 15px;
    //   left: 50px;
    // }
    .active {
      color: $orange !important;
    }
  }
}
</style>

Маршрутизатор сам по себе я сделал так:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Welcome from '../views/Welcome.vue';
import User from '../components/User/_User.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Welcome',
    component: Welcome
  },
  {
    path: '/user/:userId',
    name: 'User',
    component: User,
    props: true
  }
];

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

Вот как User.vue выглядит так, реквизиты готовы к заполнению данными:

<template>
  <div>
    <UserInfo />
    <UserIncExp />
  </div>
</template>

<script>
import UserInfo from '../User/UserInfo.vue';
import UserIncExp from '../User/UserIncExp/_UserIncExp.vue';
export default {
  components: {
    UserInfo,
    UserIncExp
  },
  props: {
    userName: {
      type: String,
      default: ''
    },
    salary: {
      type: Number,
      default: 0
    },
    inc: {
      type: Array,
      default: () => []
    },
    exp: {
      type: Array,
      default: () => []
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userId: this.$route.params.user
    }
  },
  created() {

  }
};
</script>

<style>
</style>

---

Что я ожидаю:

Я хочу заполнить маршруты и все экземпляры созданного User.vue, заполненного динамически соответствующими данными из LocalStorage.

Если я переключаю маршрут, то он должен изменить содержимое. { userName } одна скобка - просто заполнитель для визуализации, должны быть фактические данные из LocalStorage. На данный момент это выглядит так: