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

Posted 2023-02-23

【中文标题】VUE 将组件插入到数组列表中

【英文标题】：VUE Insert the component inside the array list

【发布时间】：2020-01-30 04:26:01

【问题描述】：

我有一个数组。在该数组中，我需要显示随机分量。 在我的例子中，它是 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>

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

【参考方案1】：

您可以使用computed properties 将您的数组分成两部分：

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

【参考方案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> 元素，但它与组件的工作方式相同。