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

Question

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.

Boussadjra Brahim · Accepted Answer · 2020-12-12 09:15:50Z

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>

answered Dec 12, 2020 at 9:15

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mohammad Over a year ago

thanks for your answer, but it wasn't useful, I want to have dynamic sub-items, as you see I have two items, which I gonna have sub-items that get their value of value array on sidebar_componets

Boussadjra Brahim Over a year ago

what do you mean by dynamic subitems

Mohammad Over a year ago

I mean as you can see on sidebar_components, I have to and value arrays, and again as you see on nuxt-link I put v-for on to array but I can't add v-for on value, if I use your way, I only have one value that I choosing it with index item.value[0], but I want to have all sub-item not just one of them.

Boussadjra Brahim Over a year ago

my way returns the correspondant value like item.value[0], item.value[1] ,item.value[2] ...

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related