BaseAccordion.vue

<template>
  <div >
    <div >
      <input type="checkbox" @click="toggleItem" />
      <h2 >
        <slot name="title"></slot>
      </h2>
    </div>
    <div v-show="show" >
      <slot name="content"></slot>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data: function () {
    return {
      show: false,
    };
  },
  methods: {
    toggleItem: function () {
      this.show = !this.show;
    },
  },
};
</script>
<style scoped>
.wrapper {
  margin: 0 auto;
  width: 300px;
  padding: 10px;
}
.accordion {
  display: flex;
  cursor: pointer;

  margin: 0;
}
.title {
  margin: 0;
  color: darkgreen;
}
.content {
  text-align: left;
  width: 100%;
  border-bottom: 1px solid black;
  padding: 10px;
}
</style>

HelloWorld.vue

<template>
  <div>
    <div v-for="box in boxes" :key="box.id">
      <div
        v-for="paint in paints"
        :key="paint.id"
        
        :
      >
        <BaseAccordian>
          <template v-slot:title>{{ box.name }}</template>
          <template v-slot:content>
            <div>{{ paint.name }}</div>
          </template>
        </BaseAccordian>
      </div>
    </div>
  </div>
</template>

<script>
import BaseAccordian from "./BaseAccordian.vue";
export default {
  name: "HelloWorld",
  components: {
    BaseAccordian,
  },
  data() {
    return {
      boxes: [
        {
          id: "1",
          price: "12",
          name: "apple",
          status: "medium",
        },
        {
          id: "2",
          price: "11",
          name: "bananna",
          status: "ok",
        },
        {
          id: "3",
          price: "10",
          name: "grapes",
          status: "notok",
        },
        {
          id: "4",
          price: "9",
          name: "choc",
          status: "ok",
        },
        {
          id: "5",
          price: "8",
          name: "chips",
          status: "medium",
        },
        {
          id: "6",
          price: "7",
          name: "kat",
          status: "ok",
        },
      ],

      paints: [
        {
          id: "1",
          price: "100",
          name: "assian",
          status: "ok",
        },
        {
          id: "2",
          price: "101",
          name: "vvv",
          status: "notok",
        },
        {
          id: "3",
          price: "102",
          name: "zcx",
          status: "ok",
        },
        {
          id: "4",
          price: "103",
          name: "aaa",
          status: "medium",
        },
        {
          id: "5",
          price: "104",
          name: "bbb",
          status: "notok",
        },
        {
          id: "4",
          price: "105",
          name: "asdf",
          status: "notok",
        },
      ],
    };
  },
};
</script>

<style scoped>
.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;
}
</style>

My complete code:- https://codesandbox.io/s/nameless-wildflower-3t1km?file=/src/components/HelloWorld.vue

Issue with the above code is that,

When trying to iterate the list inside of another list(I mean like, inside of one v-for, using another v-for)

I am getting each value repeatedly for 6 times, and the sub items also coming repeatedly. because of repeatedly items display.

AS considering my output, how can I get output like

Apple--- (inside of that)----show lines(without repeated list) likewise for all of them.

CodePudding user response：

For the requirement to achieve, you should run the second for loop only inside v-slot:content

HelloWorld.vue

Template

<div v-for="box in boxes" :key="box.id">
  <BaseAccordian>
    <template v-slot:title>{{ box.name }}</template>
    <template v-slot:content>
      <div
        v-for="paint in paints"
        :key="paint.id"
        
        :
      >
        <div>{{ paint.name }}</div>
      </div>
    </template>
  </BaseAccordian>
</div>

CSS

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

  position: relative;
  padding-bottom: var(--line-width);
}
.content > .line > 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;
}
.content > .line > 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;
}

Working Code

Fiddle