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>

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

Answer 2

您应该能够使用 中的索引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>在这里使用了普通元素，但它与组件的工作方式相同。