I am planning to incorporate images at a later stage, but I am currently utilizing v-for and facing a dilemma of how to seamlessly introduce the image within the loop without disrupting its flow.
<template>
<v-card>
<p v-for="item in texts" :key="item.id" class="bm-1">{{ item.text }}</p>
</v-card>
</template>
<script lang="ts">
import { Vue } from "nuxt-property-decorator";
export default class QuickStart extends Vue {
texts: any[] = [
{
id: 0,
text: "Text A",
},
{
id: 1,
text: "Text B",
},
{
id: 2,
text: "Text C",
},
];
}
</script>
As an illustration, in the provided code snippet, my intention is to insert an image between ids 1 and 2. However, I am unsure how to accomplish this task while still utilizing v-for. If not constrained by this directive, I could have simply added numbers or p tags.
In my attempts, I experimented with adding an image alongside an id and text, but the outcome was as expected - unsuccessful.