CODEWITHSUNDEEP
vue.jsnuxt.js
Mohammad
Mohammad

Reputation: 641

How can I get access to an array of objects that placed to an array on Vue.js?

Please consider the codes below:

  sidebar_components: [
    {
      title: "Admin Managment",
      href: "javascript:void(0)",
      idAcc: "accordion-1",
      value: ["this is a test 1", "this is test 2", "this is test 3"],
      to: ["/testi_1/1", "/testi_1/2", "/testi_1/3"],
      classDiv: "active_div_1",
      class: "item_link_1",
      accordion: "myAccordion1",
      icon: "fas fa-user-tie",
      titleHoverClass: "sidebar_title"
    },
    {
      title: "Admin Managment",
      href: "javascript:void(0)",
      idAcc: "accordion-2",
      value: ["this is a test 1", "this is test 2", "this is test 3"],
      to: ["/testi_2/1", "/testi_2/2", "/testi_2/3"],
      classDiv: "active_div_2",
      class: "item_link_2",
      accordion: "myAccordion2",
      icon: "fas fa-users",
      titleHoverClass: "sidebar_title"
    },
  ]

and :

      <ul class="sidebar_components accordion" role="tablist">
        <li v-for="(item, index) in sidebar_components" :key="index">
          <a
            :href="item.href"
            v-b-toggle="item.idAcc"
            :class="[item.class, 'item_link']"
          >
            <i :class="item.icon"></i>
            <span
              class="sidebar_title_active"
              :class="item.titleHoverClass"
              >{{ item.title }}</span
            >
          </a>
          <b-collapse
            :id="item.idAcc"
            :accordion="item.accordion"
            role="tabpanel"
            :class="item.classDiv"
          >
            <nuxt-link
              :to="val"
              v-for="(val, index) in item.to"
              :key="index"
            >
              {{ val }}
            </nuxt-link>
          </b-collapse>
        </li>
      </ul>

as you can see on this

<nuxt-link :to="val" v-for="(val, index) in item.to" :key="index">
    {{ val }}
</nuxt-link>

I used of val that would be link address, I'm gonna have the value of sidebar_components that its name is value, I mean these: value: ["this is a test 1", "this is test 2", "this is test 3"], how can I extract or get access to the value of it, these arrays are for sidebar sub-items everything working fine, but I don't know how can I implement or put these value of ‍‍‍‍sidebar_components on nuxt-link, it can be a span on it I know but, how can I extract it?

If you do not understand what I mean, please let me know in the comments so that I can explain more.

Upvotes: 1

Views: 1131

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Just use the index in v-for to access the sibling field value :

 <nuxt-link
              :to="val"
              v-for="(val, index) in item.to"
              :key="index"
            >
              {{ item.value[index] }}
 </nuxt-link>

Upvotes: 1

Related Questions