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

Posted 2023-03-28

【中文标题】如何在 vuejs 中使用 axios 显示获取的数据到 div

【英文标题】：how to show fetched data using axios to div in vuejs

【发布时间】：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

【参考方案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))
    ,
    ,

它应该像这样工作