use fetched info in an array in vue.js

Question

I have this array:

data() {
    return {
      landingInfo: null,
      slides: [
        {
          title: `this`,
        },
        {
          title: "that",
        },
        {
          title: "those",
        },
      ],
    };
  },

Which is being displayed this way:

 <div
          class="slide"
          v-for="(slide, index) in slides"
          :key="index",
          }"
        >
          <div>
            <h1 class="text-bold">{{ slide.title }}</h1>

          </div>

The problem is that I'm fetching info from and api and once I try to do:

 slides: [
    {
      title: {{ landingInfo.data.subtitle }},
    },
    {
      title: {{ landingInfo.data.subtitle2 }},
 
    },
    {
       title: {{ landingInfo.data.subtitle3 }},
    },
  ],

Everything explodes, I am new in vue using Nuxt.js and I cannot find any solution in how to achieve that. Can someone show me how to include the fetched info inside the array property?

PD: I already tried using "{{thefetchedinfo}}" but it takes it literally that way and displays "{{thefetchedinfo}}"

The squiggly braces are only for the template, indicating that their contents should be evaluated as javascript. The rest of the vue instance is a javascript object, which must conform to JS syntax. Squiggly's in this context wouldn't parse. — danh
– danh, Commented Jan 19, 2021 at 20:56

danh · Accepted Answer · 2021-01-19 20:40:43Z

1

The OP doesn't provide much info on the fetch, like when it is performed or what the returned data looks like, but the common pattern goes like this...

// <template> as in the OP, then...

  data() {
    return {
      landingInfo: null,
      slides: [], // empty before the fetch
    };
  },
  mounted () {
    fetchFromTheAPI().then(landingInfo => {
      // More commonly, you'd map over the returned data to form slides,
      // or, trying to match the OP...
      this.slides = [
        { title: landingInfo.data.subtitle },
        { title: landingInfo.data.subtitle2 }, // ... and so on
      ]
    });
  },

answered Jan 19, 2021 at 20:40

danh

62.7k10 gold badges100 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

use fetched info in an array in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related