CODEWITHSUNDEEP
vue.jsaxios
Vinay Thakur
Vinay Thakur

Reputation: 165

how to show fetched data using axios to div in vuejs

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

Upvotes: 0

Views: 1177

Answers (2)

Kamran Shahid
Kamran Shahid

Reputation: 21

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

Upvotes: 0

tony19
tony19

Reputation: 138196

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

Upvotes: 1

Related Questions