import BaseAccordian from "./BaseAccordion.vue";
import { dataone } from "../../assets/data";
import data from "../../assets/datatwo";
export default {
  name: "HelloWorld",
  components: {
    BaseAccordian,
  },
  data() {
    return {
      items: dataone,
      selects: data,
      accordions: [
        {
          title: "Vue",
          text: "AllaboutVue",
          textwo: "hi",
        },
        {
          title: "Nuxt",
          text: "AllaboutNuxt",
          textwo: "hi",
        },
        {
          title: "webpack",
          text: "Allaboutwebpack",
          textwo: "hi",
        },
      ],
    };
  },
};

.line >>> .content > div {
  --line-width: 2px;
  --x-offset: 8px;
  --x-width: 120px;

  position: relative;
  padding-bottom: var(--line-width);
}
.line >>> .content > div:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: var(--x-offset);
  width: var(--x-width);
  height: 100%;
  border-left: var(--line-width) dashed currentColor;
  border-bottom: var(--line-width) dashed currentColor;
}
.line >>> .content > div:after {
  content: "";
  display: block;
  position: absolute;
  bottom: calc(-1 * var(--line-width) * 1.75);
  left: calc(var(--x-offset)   var(--x-width));
  width: 0;
  height: 0;
  border: calc(var(--line-width) * 2.5) solid transparent;
  border-right: 0;
  border-left: calc(var(--line-width) * 5) solid currentColor;
}

.green {
  color: green;
  font-weight: bold;
}
.red {
  color: red;
  font-weight: bold;
}
.pink {
  color: pink;
  font-weight: bold;
}

    <div v-for="item in items" :key="item.id">
      <div
        v-for="accordion in accordions"
        :key="accordion.title"
        
        :
      >
        <BaseAccordian>
          <template v-slot:title>{{ item.val }}</template>
          <template v-slot:content>
            <div>{{ accordion.text }}</div>
            <div>{{ accordion.textwo }}</div>
          </template>
        </BaseAccordian>
      </div>
    </div>

working code:- https://codesandbox.io/s/data-change-dynaic-t48f9?file=/src/components/one/HelloWorld.vue

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.

CodePudding user response：

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

Example:

<div
  v-for="accordion in accordions"
  :key="accordion.title"
  
  :
>
  <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"