如何在 vuejs 中使用 axios 显示获取的数据到 div答案

【问题标题】：how to show fetched data using axios to div in vuejs如何在 vuejs 中使用 axios 显示获取的数据到 div
【发布时间】：2021-07-24 07:30:11
【问题描述】：

我对 vue 很陌生，我正在尝试使用 axios api 从 codeigniter 后端获取博客。但我无法理解如何在 div 中填充它。

我使用 v-if，它会生成 6 个列表，但数据不存在，如何在此处使用背景图像。

在 json 响应中有缩略图：“https://url.com/uploads/thumb213.jpg”。如何使用 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>

这是组件部分

         <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>

这是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

【问题讨论】：

标签： vue.js axios

【解决方案1】：

获取数据

axios.get() 回调将响应存储在 data property 中，但您的 API 数据本身包含 response.posts 内的博客数据，因此其属性路径为 res.data.response.posts：

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

装订样式

v-bind:style 的绑定值应该是字符串或字符串的 JavaScript 表达式（如 template literals 或字符串连接）：

<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

【讨论】：

【解决方案2】：

我发现问题出在您的 getBlog 函数的 then 块上。你正在做 this.blogs=response。您可以通过执行 response.data.posts 从响应中获取数据只需替换您的：

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

下面的代码部分：

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))
    },
    },

它应该像这样工作

【讨论】：