CODEWITHSUNDEEP
javascriptvue.js
user17525310
user17525310

Reputation:

Problem with v-for, Where it is iterating multiple times in Vuejs?

    <div v-for="item in items" :key="item.id">
      <div
        v-for="accordion in accordions"
        :key="accordion.title"
        class="line"
        :class="{
          green: accordion.text === 'AllaboutVue',
          red: accordion.textwo === 'hi',
          pink: accordion.text === 'Allaboutwebpack',
        }"
      >
        <BaseAccordian>
          <template v-slot:title>{{ item.val }}</template>
          <template v-slot:content>
            <div>{{ accordion.text }}</div>
            <div>{{ accordion.textwo }}</div>
          </template>
        </BaseAccordian>
      </div>
    </div>

Issue with v-for, Where it is iterating multiple times. As you can see in the above codesandbox.

Where I am looping data with v-for, As every item which coming from v-for iterating multiple times. So how to avoid that, and what's problem with the code.

Upvotes: 0

Views: 489

Answers (1)

Vitaliy Rayets
Vitaliy Rayets

Reputation: 2394

Just move v-for="item in items" in v-for="accordion in accordions"

Example:

<div
  v-for="accordion in accordions"
  :key="accordion.title"
  class="line"
  :class="{
    green: accordion.text === 'AllaboutVue',
    red: accordion.textwo === 'hi',
    pink: accordion.text === 'Allaboutwebpack',
  }"
>
  <div v-for="item in items" :key="item.id">
    <BaseAccordian>
      <template v-slot:title>{{ item.val }}</template>
      <template v-slot:content>
        <div>{{ accordion.text }}</div>
        <div>{{ accordion.textwo }}</div>
      </template>
    </BaseAccordian>
  </div>
</div>

codesandbox

Also you have typo in dataone:

{
    id: 8,
    val: "7",
    kk: "gg",
    status: "notok"
  },

val must be "8"

Upvotes: 2

Related Questions