在一個v-for內部，如何在Vuejs中使用另一個v-for？

基礎手風琴.vue

<template>
  <div class="wrapper">
    <div class="accordion">
      <input type="checkbox" @click="toggleItem" />
      <h2 class="title">
        <slot name="title"></slot>
      </h2>
    </div>
    <div v-show="show" class="content">
      <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"
        class="line"
        :class="{
          green: paint.status === 'ok',
          red: paint.status === 'notok',
          pink: paint.status === 'medium',
        }"
      >
        <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>

我的完整代碼：- https://codesandbox.io/s/nameless-wildflower-3t1km?file=/src/components/HelloWorld.vue

上面代碼的問題是，

嘗試在另一個串列中迭代串列時（我的意思是，在一個 v-for 中，使用另一個 v-for）

我重復獲取每個值 6 次，子項也重復出現。因為重復的專案顯示。

考慮到我的輸出，我怎樣才能得到像

蘋果---（在里面）----對所有這些都同樣顯示行（沒有重復的串列）。

uj5u.com熱心網友回復：

為了達到要求，您應該只在內部運行第二個 for 回圈 v-slot:content

HelloWorld.vue

模板

<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"
        class="line"
        :class="{
          green: paint.status === 'ok',
          red: paint.status === 'notok',
          pink: paint.status === 'medium',
        }"
      >
        <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;
}

作業代碼

小提琴

標籤：javascript Vue.js Vuejs2 v-for

上一篇：Vue.js螢屏大小回應能力

下一篇：組件上的輸入事件在Vue.js中有什么作用？