how to show fetched data using axios to div in vuejs

Question

i am very new to vue, i am trying to fetch blog from codeigniter backend using axios api. but i am not able to understand how to populate that in div.

i use v-if and it generate 6 lists but data is not there also how to work with background image here.

in json response there is thumbnail : "https://url.com/uploads/thumb213.jpg". how to show that using v-bind.

<script>
    new Vue({
        el: '#blogapp',
        data () {
            return {
               blogs: [],
            }
        },
        methods: {
            getBlogs () {
            axios
            .get('https://www.happyvoyaging.com/api/blog/list?appkey="grv250531"')
            .then(response => (this.blogs = response))
            .catch(error => console.log(error))
        },
        },

        mounted() {
           this.getBlogs();
         },
        })
</script>

this is the component part

         <div v-for="blog in blogs" class="col-md-3">
        <div">
          <a href="blog-post.html"></a>
          <div class="banner">
            <div class="banner-bg" v-bind:style="background-image:url('{{ blog.thumbnail }}');"></div>
            <div class="banner-caption">
              <p class="theme-blog-item-time">day ago</p>
              <h5 class="title">{{ blog.title }}</h5>
              <p class="desc">{{ blog.desc }}</p>
            </div>
          </div>
        </div>
      </div>

this is the response in json

    error: {status: false, msg: ""}
response: {posts: [{id: "44", title: "Andaman Islands: The Complete Guide for Travellers",…},…], totalPages: 2}
posts: [{id: "44", title: "Andaman Islands: The Complete Guide for Travellers",…},…]
0: {id: "44", title: "Andaman Islands: The Complete Guide for Travellers",…}
1: {id: "43", title: "Russia Visa for Indians",…}
2: {id: "42", title: "Dubai Creek – Sail through the heart of Dubai",…}
3: {id: "41", title: "A Must Follow Guide To Japan Visa Requirements",…}
4: {id: "40", title: "Russia to resume issuing visas to all categories of Indian citizens",…}
5: {id: "23", title: "Trapizzino, Rome’s OG Street Food",…}
6: {id: "17", title: "Where to Eat in Rome During Holidays",…}
totalPages: 2

tony19 · Accepted Answer · 2021-05-01 04:06:27Z

Getting to the data

The axios.get() callback stores the response in the data property, but your API data itself contains the blog data inside response.posts, so the property path to that is res.data.response.posts:

axios.get(/*...*/).then(res => this.blogs = res.data.response.posts)

Binding style

The binding value for v-bind:style should be a string or a JavaScript expression for a string (such as template literals or string concatenation):

<div class="banner-bg" v-bind:style="background-image:url('{{ blog.thumbnail }}');"></div> ❌

<div class="banner-bg" v-bind:style="`background-image:url('${blog.thumbnail}');`"></div> ✅

demo

Kamran Shahid · Accepted Answer · 2021-05-01 04:12:37Z

I see the problem is with your getBlog function's then block. You are doing this.blogs=response. you can get the data from the response by doing response.data.posts Simply replace your:

methods: {
        getBlogs () {
        axios
        .get('https://www.happyvoyaging.com/api/blog/list?appkey="grv250531"')
        .then(response => (this.blogs = response))
        .catch(error => console.log(error))
    },
    },

part with below code:

methods: {
        getBlogs () {
        axios
        .get('https://www.happyvoyaging.com/api/blog/list?appkey="grv250531"')
        .then(response => (this.blogs = response.data.posts))
        .catch(error => console.log(error))
    },
    },

It should work like this

Collectives™ on Stack Overflow

how to show fetched data using axios to div in vuejs

2 Answers 2

Getting to the data

Binding style

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Getting to the data

Binding style

Comments

Comments

Linked

Related