VUE 在数组列表中插入组件

Question

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

storyObject storyObject storyObject storyObject storyObject反馈组件storyObject storyObject

在不改变数组的情况下在列表中显示该组件的方法是什么？我一直在寻找 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

您可以使用计算属性将数组分为两部分：<template>&nbsp; &nbsp; <ul class="portfolio">&nbsp; &nbsp; &nbsp; &nbsp; <story-component&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-for="story in computedPortfolioBefore"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :key="story.id"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :story-name="story.name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :story-title="story.title" />&nbsp; &nbsp; &nbsp; &nbsp; <li is="feedback-component" class="portfolio__feedback"></li>&nbsp; &nbsp; &nbsp; &nbsp; <story-component&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-for="story in computedPortfolioAfter"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :key="story.id"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :story-name="story.name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :story-title="story.title" />&nbsp; &nbsp; </ul></template><script>import portfolio from '@assets/data/portfolio.json';import StoryComponent from './StoryComponent';import FeedbackComponent from './FeedbackComponent';export default {&nbsp; components: {&nbsp; &nbsp; StoryComponent,&nbsp; &nbsp; FeedbackComponent,&nbsp; },&nbsp; computed: {&nbsp; &nbsp; computedPortfolioBefore() {&nbsp; &nbsp; &nbsp;if( this.portfolio.length > 2 ) {&nbsp; &nbsp; &nbsp; &nbsp;// returns all items except last 2&nbsp; &nbsp; &nbsp; &nbsp;return this.portfolio.slice(0, -2);&nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp;return this.portfolio;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; },&nbsp; &nbsp; computedPortfolioAfter() {&nbsp; &nbsp; &nbsp;if( this.portfolio.length > 2 ) {&nbsp; &nbsp; &nbsp; &nbsp;// returns last 2 items&nbsp; &nbsp; &nbsp; &nbsp;return this.portfolio.slice(-2);&nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp;return [];&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp; },&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; portfolio,&nbsp; &nbsp; };&nbsp; },};</script>

Answer 2

您应该能够使用 中的索引v-for在正确的位置插入额外的组件。这里的关键是v-if="index === Math.max(0, portfolio.length - 2)". 不清楚如果数组中的项目少于 2 个，正确的行为应该是什么，所以我假设在这种情况下，反馈组件应该在开始时进行。如果数组为空，则不会呈现任何内容，因此需要单独处理这种情况。new Vue({&nbsp; el: '#app',&nbsp;&nbsp;&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; portfolio: [&nbsp; &nbsp; &nbsp; &nbsp; { id: 1 },&nbsp; &nbsp; &nbsp; &nbsp; { id: 2 },&nbsp; &nbsp; &nbsp; &nbsp; { id: 3 },&nbsp; &nbsp; &nbsp; &nbsp; { id: 4 },&nbsp; &nbsp; &nbsp; &nbsp; { id: 5 },&nbsp; &nbsp; &nbsp; &nbsp; { id: 6 }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; }})<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script><div id="app">&nbsp; <ul>&nbsp; &nbsp; <template v-for="(story, index) in portfolio">&nbsp; &nbsp; &nbsp; <li&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; v-if="index === Math.max(0, portfolio.length - 2)"&nbsp; &nbsp; &nbsp; &nbsp; key="feedback"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; Feedback component&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li :key="story.id">&nbsp; &nbsp; &nbsp; &nbsp; Story component {{ story }}&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </template>&nbsp; </ul></div>我只是<li>在这里使用了普通元素，但它与组件的工作方式相同。