组件不匹配 在 Vue.js 中存储数据



我有一个组件,它尝试将路由参数与存储中的对象数组匹配,以查看路由名称/变量是否在对象中,然后显示对象中的数据(如果匹配(。但是,无论如何,它总是返回 false。它正在从外部JS文件中提取数据,那么这可能是通过引用传递而不是硬定义它吗?

这是我的商店

import Vue from "vue";
import Vuex from "vuex";
import { productList } from "../assets/db.js";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
productList: productList
},
mutations: {},
actions: {},
modules: {}
});
export default store;

这是组件内部的功能

created: function() {
for (let type in this.$store.state.productList) {
console.log(type.includes(this.$route.params.ptype))
}
}

路线是动态的,ptype匹配 (this.$route.params.ptype(

但是,它始终在控制台中返回 false。循环有问题吗?另外,如果有更好的方法来使用这样的路由显示数据,请告诉我!谢谢!

我们这里缺少一些信息,productList应该是对象数组? 那么在你的循环中,type会是一个整数?你确定它不是字符串吗?如果我误解了并且productList只是一个对象,那么这意味着type是一个字符串。现在,String.protoype.includes()区分大小写,所以也许这是一个区分大小写的问题?如果没有,我会继续仔细检查您的数据形状,也许您混淆了一些东西。

在你的 vue-router 配置中,有一个标志,你可以为每个路由props设置标志,如果你把它设置为 true,所有参数都将被设置为道具,你可以在组件中使用 this.myProp 访问它们。 您还可以传入一个对象,该对象将传入静态道具。 或者你可以传递一个函数,它将你在组件中使用的路由对象作为参数,在将它们作为 props 传递之前,对它做任何你想做的事情。

更多关于这一点的信息在 vue-router 文档中

最新更新