Vue 如何将元素添加到 v-for 循环

Question

在我的vue -app 中，我想在v-for循环中添加一个元素。 所以我尝试这样做：

<li v-for="(slide, index) in slides" :key="index"
  :class="slideIndex === index ? 'active' : ''"
  @click="slideIndex = index"
>
 {{ slide.nodeName }}
</li>
<li class="cursor-pointer item" v-if="slides.length === 5">foobar</li>

但这不会将“新”项保留在索引内，例如我希望元素位于循环内。

我该如何解决？

Answer 1

要将元素包含到vue.js中其他元素的循环中，您需要将它们包含到它们的标签中。 在您的情况下，您需要注意，将<li>嵌套到<li>可能会导致问题。 尝试这个：

<li v-for="(slide, index) in slides" :key="index"
  :class="slideIndex === index ? 'active' : ''"
  @click="slideIndex = index"
>
 {{ slide.nodeName }}
  <ul v-if="slides.length === 5">
    <li class="cursor-pointer item">foobar</li>
  </ul>
</li>

由于循环位于您的第一个<li>元素上，因此该元素的<li>和</li>的所有内容都将包含在循环中。 我在嵌套列表的第二个<li>周围添加了一个<ul> 。

Answer 2

你的意思是，如果slides.length === 5，然后添加你的第二个<li>后每个标签<li>标签？ 如果是，请看下面的代码

<template v-for="(slide, index) in slides">
  <li
    :key="slide.nodeName"
    :class="slideIndex === index ? 'active' : ''"
    @click="slideIndex = index"
  >
    {{ slide.nodeName }}
  </li>
  <li
    :key="`${slide.nodeName}_${index}`"
    class="cursor-pointer item"
    v-if="slides.length === 5"
  >
    foobar
  </li>
</template>

请注意同级<li>标签的键值绑定

Answer 3

<el-row v-for="item in queryFolderList" :key="item.id">
  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
    <el-button-group>
      <el-button type="primary" size="mini" @click="goToDetil(item.id)"
        >{{ item.id }}</el-button
      >
      <el-button type="warning" size="mini" @click="submit(item.id)"
        >{{ item.name}}</el-button
      >
    </el-button-group>
  </el-col>