title: How to call array values dynamically from an existing array in Vuejs?
body: <p>HelloWorld.vue</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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" }
  ];
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b&gt;Vuejs dynamic routing&lt;/b&gt;
      &lt;div v-for="item in items" :key="item.id"&gt;
        &lt;b&gt;{{ item.id }}.&lt;/b&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;
        &lt;router-link :to="{ name: 'UserWithID', params: { id: item.id } }"&gt;
          {{ item.kk }}
        &lt;/router-link&gt;
      &lt;/div&gt;
      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;User /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import User from "./User.vue";
  import { datalist } from "./datalist";
  export default { 
    name: "HelloWorld",
    components: {
      User,
    },
    data() {
      return {
        items: datalist,
      };
    },
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>User.vue</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; h(App)
  }).$mount("#app");</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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" }
  ];</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;router-link :to="{ name: 'BookWithID' }"&gt;
        {{ user.book }}
      &lt;/router-link&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { datalisttwo } from "./datalisttwo";
  export default {
    name: "User",
    components: {},
    data() {
      return {
        lists: datalisttwo,
      };
    },
    computed: {
      user: function () {
        return this.lists.find((item) =&gt; item.id === this.$route.params.id);
      },
    },
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As per the below code, in the <strong>datalisttwo.js</strong>  I have array values like <strong>steel and pen</strong> Where i want to call both of them together like <strong>steel/pen</strong> as an api call in the mounted() .</p>
  <p>When i click on the router-link, {{ user.book }} from  User.vue component.</p>
  <p>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</p>
  <p>Here is my code:- <a href="https://codesandbox.io/s/new-hill-6yum4o?file=/src/components/User.vue" rel="nofollow noreferrer">https://codesandbox.io/s/new-hill-6yum4o?file=/src/components/User.vue</a></p>