How to call array values dynamically from an existing array in Vuejs?

Question

HelloWorld.vue

export const datalist = [
  { id: 1, val: "11", kk: "potter" },
  { id: 2, val: "22", kk: "james" },
  { id: 3, val: "55", kk: "limda" },
  { id: 4, val: "77", kk: "stepen" }
];
 

<template>
  <div>
    <b>Vuejs dynamic routing</b>
    <div v-for="item in items" :key="item.id">
      <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp;
      <router-link :to="{ name: 'UserWithID', params: { id: item.id } }">
        {{ item.kk }}
      </router-link>
    </div>
    <br /><br /><br />
    <User />
  </div>
</template>

<script>
import User from "./User.vue";
import { datalist } from "./datalist";
export default { 
  name: "HelloWorld",
  components: {
    User,
  },
  data() {
    return {
      items: datalist,
    };
  },
};
</script>

User.vue

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
import book from "./components/book.vue";

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: "/", name: "User", component: HelloWorld },
    { path: "/", name: "BookWithID", component: book },
    { path: "/:id", name: "UserWithID", component: HelloWorld }
  ]
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App)
}).$mount("#app");

export const datalisttwo = [
  { id: 1, book: "steel", pen: "p1", gap: "1" },
  { id: 2, book: "iron", pen: "jp2", gap: "5" },
  { id: 3, book: "platinium", pen: "p3", gap: "2" },
  { id: 4, book: "gold", pen: "p4", gap: "9" }
];

<template>
  <div>
    <router-link :to="{ name: 'BookWithID' }">
      {{ user.book }}
    </router-link>
  </div>
</template>

<script>
import { datalisttwo } from "./datalisttwo";
export default {
  name: "User",
  components: {},
  data() {
    return {
      lists: datalisttwo,
    };
  },
  computed: {
    user: function () {
      return this.lists.find((item) => item.id === this.$route.params.id);
    },
  },
};
</script>

As per the below code, in the datalisttwo.js I have array values like steel and pen Where i want to call both of them together like steel/pen as an api call in the mounted() .

When i click on the router-link, {{ user.book }} from User.vue component.

Ex:- I want to pass the pen/gap array values as query parameters. when clicked on {{ user.book }} from user.vue componet. Please go through codesandbox once, I tried adding computed property for pen and gap. But pen/gap --- but not calling dynamically

Here is my code:- https://codesandbox.io/s/new-hill-6yum4o?file=/src/components/User.vue

Answer 1

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
import book from "./components/book.vue";

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: "/", name: "User", component: HelloWorld },
    { path: "/", name: "BookWithID", component: book },
    { path: "/:id", name: "UserWithID", component: HelloWorld }
  ]
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App)
}).$mount("#app");

export const datalisttwo = [
  { id: 1, book: "steel", pen: "p1", gap: "1" },
  { id: 2, book: "iron", pen: "jp2", gap: "5" },
  { id: 3, book: "platinium", pen: "p3", gap: "2" },
  { id: 4, book: "gold", pen: "p4", gap: "9" }
];

<template>
  <div>
    <router-link :to="{ name: 'BookWithID' }">
      {{ user.book }}
    </router-link>
  </div>
</template>

<script>
import { datalisttwo } from "./datalisttwo";
export default {
  name: "User",
  components: {},
  data() {
    return {
      lists: datalisttwo,
    };
  },
  computed: {
    user: function () {
      return this.lists.find((item) => item.id === this.$route.params.id);
    },
  },
};
</script>

I ran this directly. Error 1:

Imports must be at the top.

Look at 25, 0

Error 2:

Exports must be at the top

Look at 41, 8

Answer 2

Your question and description is quite unclear, so I'll try to answer how I understand it. If that is not what you were expecting, try to explain it again clearly.

First, define your routes clearly. Here your have two routes pointing to '/'. Try to do it to have your user index at '/', your book at '/book/:id', and your user at 'user/:id'.

Second, I am unsure why you have your HelloWorld.vue in both User and UserWithId routes. If intended, disregard. If not, you should clean up that whole file to get the right route pointing to the right component.

Third, used on your example of potter, if you are looking at the book component, for which you haven't provided the code, you can do it such as:

...
computed: {
  book() {
    if (this.$route.params.id == null || this.$route.params.id == undefined) {
      throw new Error('No book id provided')
    }
    return datalisttwo.find(_ => _.id == this.$route.params.id)
  },
  pen() {
    this.book.pen
  },
  gap() {
    this.book.gap
  }
}
...

With this you'll be able to do whatever you whish with this.pen and this .gap.

Now, if you were to want to not import data list again, you can pass your retrieved pen & gap as query parameters: https://router.vuejs.org/api/