在一个 v-for 内部，如何在 Vuejs 中使用另一个 v-for？

Question

BaseAccordion.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>

上面代码的问题在于，

当试图在另一个列表中迭代列表时（我的意思是，在一个 v-for 中，使用另一个 v-for）

我是每个值重复获取 6 次，子项也重复获取。因为重复显示项目。

Answer 1

为了达到要求，你应该运行第二个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;
}

工作代码

Fiddle

在一个 v-for 内部，如何在 Vuejs 中使用另一个 v-for？

Inside of one v-for, How to use another v-for in Vuejs?

javascript

vue.js

vuejs2

v-for