I have an array and I want to display a random component inside it. Specifically, I want to include the FeedbackComponent before the last two objects in the array. This is how it should look like in a schematic representation:
storyObject storyObject storyObject storyObject storyObject feedbackComponent storyObject storyObject
Is there a way to achieve this without changing the original array? I have been searching for a solution similar to rendering inside a component in React.
Here is my PortfolioComponent.vue which contains a few objects from a json data:
<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>
Below is the HTML code of my StoryComponent.vue:
<template>
<li class="story">
<span class="story__name">{{ storyName }}</span>
<span class="story__title">{{ storyTitle }}</span>
</li>
</template>
I hope this explanation is clear and provides enough information.