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('');"></div>              <div class="banner-caption">                <p class="theme-blog-item-time">day ago</p>                <h5 class="title"></h5>                <p class="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  

https://stackoverflow.com/questions/67342628/how-to-show-fetched-data-using-axios-to-div-in-vuejs May 01, 2021 at 11:29AM