javascript - Vue-Budget-Calculator-App：动态路由相关的道具

Question

预算-计算器-应用

我正在开发一个预算计算器应用程序，它应该允许用户使用自定义的费用列表过滤薪水，以查看他们在所有费用和收入都将与薪水计算后的剩余预算。

预览图像：

---

这个怎么运作：

我使用 Chrome 的 LocalStorage 来保存 store.state.users，如下例所示：

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

到目前为止，这有效。数据按预期存储在内存中。对于每个添加的用户，都会创建一个与之相关的动态路由users[id]

---

我被困在哪里：

我正在创建这样的动态路线。在组件Navigation.vue中，检查下面的代码中的“CHECK HERE”以找到其中的部分<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的实际数据目前是这样的：

标签： javascriptvue.jslocal-storagevue-router