v-for的問題，它在Vuejs中在哪里迭代多次？

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"
        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>

作業代碼：- https://codesandbox.io/s/data-change-dynaic-t48f9?file=/src/components/one/HelloWorld.vue

v-for 的問題，它在哪里迭代多次。正如您在上面的代碼和框中看到的那樣。

我用 v-for 回圈資料的地方，因為來自 v-for 的每個專案迭代多次。那么如何避免這種情況，以及代碼有什么問題。

uj5u.com熱心網友回復：

剛搬進v-for="item in items"去v-for="accordion in accordions"

例子：

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

代碼沙盒

你也有錯字dataone：

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

val 必須是 "8"

標籤：javascript Vue.js

上一篇：vue通過js更改選定的選項，使用v-model

下一篇：手風琴打開時，如何繪制虛線“L”形線？