Vue：如何摆脱重复的内容

Question

我有一个名称数组，使用 v-for 我得到了名称，正如你所看到的，我有两个 v-for，在这个例子中内容是重复的我的内容很小，看起来并不那么可怕现实生活中它可以更大，所有的问题是内容重复，我尝试申请插槽但无法应对

模板

<template>
  <div>
    <div v-for="(item, index) in array" :key="index" class="names">
      <div class="show-names">
        <p>{{ item.name }}</p>
      </div>
      <div
        v-for="(girlNames, index) in item.girlNames"
        :key="index"
        class="names"
      >
        <div class="show-names">
          <p>{{ girlNames.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

脚本

<script>
export default {
  data() {
    return {
      array: [
        { name: "Alex" },
        { name: "Jacob" },
        { name: "Robert" },
        {
          girlNames: [
            {
              name: "Anna",
            },
            {
              name: "Kiwi",
            },
            {
              name: "Ava",
            },
          ],
        },
      ],
    };
  },
};
</script>

是的，这张图显示了内容重复的地方

您还可以查看代码example in codesandbox

Answer 1

我在这里看到的唯一问题是糟糕的数据结构。在我看来它应该是一个有两个字段的对象，在你的情况下男孩和女孩分开，并且在这个对象中应该是实际数据：

<script>
export default {
  data() {
    return {
      names: {
          boys: [
              { name: "Alex" },
              { name: "Jacob" },
              { name: "Robert" },
            ],
          girls: [
              { name: "Anna" },
              { name: "Kiwi" },
              { name: "Ava" },
            ]
          }
        },
      ],
    };
  },
};
</script>

他们在 template 中的代码如下：

<template>
  <div>
    <div class="names">
      <div v-for="(item, index) in name.boys" :key="index" class="show-names">
        <p>{{ item.name }}</p>
      </div>
      <div v-for="(item, index) in name.girls" :key="index" class="show-names">
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

Vue：如何摆脱重复的内容

Vue: How to get rid of duplicate content

javascript

vue.js

vue-component

vuejs2