Vue.JS and figures/captions

user_13383199 0
Viewed 276

I'm working on my new website design and decided to incorporate Vue.JS which I know very little about but am learning as I redesign my website.

I am using a Vue app to load different pages on my site. I am also using it to load the image gallery, so I have all my images placed into an array in the app and they load just fine into the HTML.

I decided to use figures and want to place a caption beneath each image.

What I'm trying to do is place the figcaption text in the vue app, as part of the image array and have it load each text that belongs with each image.

this is the code i have for the html:

<div id="images" class="gallery content" v-if="gallery" v-for='img in imgs'>
    <figure>
        <img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
        <figcaption> a caption </figcaption>
    </figure>
</div>

the "a caption" is just a place taker right now so i can see what it looks like on the site but i want that replaced with the actual caption which would be set in the vue app which is below.

js:

<script>
    const test = Vue.createApp({
        data(){
            return{
                home: true,
                gallery: false,
                store: false,
                about: false,
                imgs: [
                    { url: 'images\\wood_gallery\\pens\\pen0.jpeg', id: 'pen0', alt: 'an image', caption: 'Pen kit: Skeleton key \n Wood: unknown' },

.... rest of the vue app code which is fine and works so not necessary to show.

Question: Can I do it this way and how do I access that 'caption' portion of text and put it into the html as text?

vue.js html
2 Answers

Simply use img.caption in the figure tag to display the caption content.

<figure>
    <img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
    <figcaption>{{ img.caption }}</figcaption>
</figure>
user_136174970

I think this works fine.

        <div id="images" class="gallery content" v-if="gallery" v-for='img in imgs'>
            <figure>
                <img class="gallery-img" id="img.id" :src="img.url" :alt="img.alt" v-on:click="showModal">
                <figcaption v-html=“caption”></figcaption>
            </figure>
        </div>

            const test = Vue.createApp({
                data(){
                    return{
                        home: true,
                        gallery: false,
                        store: false,
                        about: false,
                        caption:"<h1>hi</h1>",
                        imgs: [
                            { url: 'images\\wood_gallery\\pens\\pen0.jpeg', id: 'pen0', alt: 'an image', caption: 'Pen kit: Skeleton key \n Wood: unknown' },
user_129020060
Related