Component not matching Store data right in Vue.js

Question

I have an component that tries to match the route param to an array of objects in the store to see if the route name/variable is in an object and then display data from the object if it matches. However, no matter what, it returns false always. It is pulling its data from an external JS file, so could this be something with it being passed by reference rather than hard defining it?

Here is my store

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;

Here is the function inside the component

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

The route is dynamic and matches ptype ( this.$route.params.ptype )

However it always returns false in console. Is there something wrong with the loop? Also, if there is a better way to display data using routes like this please let me know! Thanks!

Answer 1

We are lacking some information here, productList is supposedly an Array of Objects? then inside of your loop, type would be an Integer? Are you sure that it isnt a string?. Incase i misunderstood and productList is just an Object, then that would mean type is a string. Now, String.protoype.includes() is case-sensitive, so perhaps this is an Issue of case-sensitivity? If not i would go ahead and double check the shape of your data, perhaps youve mixed something up.

In your vue-router config, there is a flag you can set the flag per route props , if you set that to true, all params will be set as props and you can access them with this.myProp inside of your component. You can also pass in an Object which will pass in static props. Or you can pass a function, which takes the route object youve been using in your component as parameter to do whatever you wish with it before passing them as props.

More about that in the vue-router docs