javascript - VUE 将组件插入到数组列表中

Question

我有一个数组。在该数组中，我需要显示随机分量。就我而言，它是FeedbackComponent。它应该显示在数组中的最后两个对象之前。所以它应该是这样的示意图：

故事对象故事对象故事对象故事对象故事对象反馈组件故事对象故事对象

在不改变数组的情况下在列表中显示该组件的方法是什么？我一直在寻找 React 中可用的东西，比如在组件内渲染。

所以这是我的PortfolioComponent.vue，它由几个对象组成（存储在 json 数据中）

<template>
    <ul class="portfolio">
        <story-component
          v-for="story in portfolio"
          :key="story.id"
          :story-name="story.name"
          :story-title="story.title" />
        <li is="feedback-component" class="portfolio__feedback"></li>
    </ul>
</template>

<script>
import portfolio from '@assets/data/portfolio.json';

import StoryComponent from './StoryComponent';
import FeedbackComponent from './FeedbackComponent';

export default {
  components: {
    StoryComponent,
    FeedbackComponent,
  },
  data() {
    return {
      portfolio,
    };
  },
};
</script>

这是我的StoryComponent.vue的 html

<template>
  <li class="story">
    <span class="story__name">{{ storyName }}</span>
    <span class="story__title">{{ storyTitle }}</span>
  </li>
</template>

希望这就足够了，我已经解释清楚了。

Answer 1

您应该能够使用 中的索引v-for在正确的位置插入额外的组件。这里的关键是v-if="index === Math.max(0, portfolio.length - 2)". 如果数组中的项目少于 2 个，则不清楚正确的行为应该是什么，所以我假设在这种情况下，反馈组件应该在开始时出现。如果数组为空，则不会渲染任何内容，因此需要单独处理这种情况。

new Vue({
  el: '#app',
  
  data () {
    return {
      portfolio: [
        { id: 1 },
        { id: 2 },
        { id: 3 },
        { id: 4 },
        { id: 5 },
        { id: 6 }
      ]
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <ul>
    <template v-for="(story, index) in portfolio">
      <li 
        v-if="index === Math.max(0, portfolio.length - 2)"
        key="feedback"
      >
        Feedback component
      </li>
      <li :key="story.id">
        Story component {{ story }}
      </li>
    </template>
  </ul>
</div>

我在<li>这里只使用了普通元素，但它与组件的工作方式相同。

Answer 2

您可以使用计算属性将数组分成两部分：

<template>
    <ul class="portfolio">
        <story-component
          v-for="story in computedPortfolioBefore"
          :key="story.id"
          :story-name="story.name"
          :story-title="story.title" />

        <li is="feedback-component" class="portfolio__feedback"></li>

        <story-component
          v-for="story in computedPortfolioAfter"
          :key="story.id"
          :story-name="story.name"
          :story-title="story.title" />
    </ul>
</template>

<script>
import portfolio from '@assets/data/portfolio.json';

import StoryComponent from './StoryComponent';
import FeedbackComponent from './FeedbackComponent';

export default {
  components: {
    StoryComponent,
    FeedbackComponent,
  },
  computed: {
    computedPortfolioBefore() {
     if( this.portfolio.length > 2 ) {
       // returns all items except last 2
       return this.portfolio.slice(0, -2);
     } else {
       return this.portfolio;
     }
    },
    computedPortfolioAfter() {
     if( this.portfolio.length > 2 ) {
       // returns last 2 items
       return this.portfolio.slice(-2);
     } else {
       return [];
     }
    }
  },
  data() {
    return {
      portfolio,
    };
  },
};
</script>