Vue.js - Calling a 'Component' from an Iteration in a .vue page

I just thought I’d share this bit of code with you. So I have a card with full-page PopUps ( dialogs) but to save the trauma of putting all of this on one page I am using components and then calling each one with ‘if’ statements ( as it’s inside a loop )

So each of your components goes on their own pages in the ‘src/components’ folder.

 

We then need to import all of these into our SCRIPT section

import PhotosView from '../components/PhotosView.vue'
import LocationView from '../components/LocationView.vue'
import SealsView from '../components/SealsView.vue'
import DisturbanceView from '../components/DisturbanceView.vue'
import AdditionalView from '../components/AdditionalView.vue'
import PhotosEditor from '../components/PhotosEditor.vue'
import LocationEditor from '../components/LocationEditor.vue'
import SealsEditor from '../components/SealsEditor.vue'
import DisturbanceEditor from '../components/DisturbanceEditor.vue'
import AdditionalEditor from '../components/AdditionalEditor.vue'

Then register the components

export default {
components: {
PhotosView,
LocationView,
SealsView,
DisturbanceView,
AdditionalView,
PhotosEditor,
LocationEditor,
SealsEditor,
DisturbanceEditor,
AdditionalEditor
},

Now in the HTML I have a loop that I want to make a decision on which component to show depending on the value. I solve this puzzle with the following code

<v-container v-if="item.text === 'Photos'">
<PhotosView/>
</v-container>
<v-container v-if="item.text === 'Location'">
<LocationView/>
</v-container>
<v-container v-if="item.text === 'Seals'">
<SealsView/>
</v-container>
<v-container v-if="item.text === 'Disturbance'">
<DisturbanceView/>
</v-container>
<v-container v-if="item.text === 'Additional'">
<AdditionalView/>
</v-container>