Vuejs Axios 数据未显示

2024-01-03

不显示信息的问题在获取时被延迟,我需要任何帮助来解决这个问题。

        <h1>@{{message}}</h1>

        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-10"><h3 class="panel-title">Experience</h3></div>
                    <div class="col-md-2 text-right">
                        <button class="btn btn-success">Ajouter</button>
                    </div>
                </div>

            </div>
            <div class="panel-body" >

                <ul class="list-group">
                    <li class="list-group-item" v-for="experience in experiences" >
                        <div class="pull-right">
                            <button class="btn btn-warning btn-sm">Editer</button>
                        </div>
                        <h3>@{{experience.titre}}</h3>
                        <p>@{{experience.body}}</p>
                        <small>@{{experience.debut}} - @{{experience.fin}}</small>
                    </li>

                </ul>

            </div>
        </div>

Vuejs

<script src="{{asset('js/vue.js')}}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
     var app = new Vue({
       el: '#app',
       data: {
         message: 'Nawfal Kharbouch',
         experiences:[]
       },
       methods:{
        getExperiences:function(){
            axios.get('http://localhost:8080/getexperiences').then(response=>{
                this.experiences=response.data;
                console.log(this.experiences);
            }).catch(function(error){
                console.log('erros : ',error);
            })  
        }
       },
       mounted:function(){
        this.getExperiences();
        console.log(this.experiences);
        }
    })
</script>

不显示信息的问题在获取时被延迟,我需要任何帮助来解决这个问题。 //控制台谷歌浏览器

[__ob__: Observer]
vue.js:8553 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
backend.js:1  vue-devtools  Detected Vue v2.5.16 
5:171 (3) [{…}, {…}, {…}, __ob__: Observer];

//图片观看视频 https://i.stack.imgur.com/clUdz.jpg


您需要将其传递给变量,而不是直接使用它。

methods:{
        getExperiences:function(){
        var vm = this
            axios.get('http://localhost:8080/getexperiences').then(response=>{
                vm.experiences=response.data;
                console.log(vm.experiences);
            }).catch(function(error){
                console.log('erros : ',error);
            })  
        }
       },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vuejs Axios 数据未显示 的相关文章

随机推荐

  • 如何从 ASP.NET Core 中的实体框架中的数据库更新 VS 2019 中的模型

    到 VS 2019 我创建了一个 API 项目 首先是数据库 一切都运行良好 现在我在数据库中进行了一些更改 例如添加新表和一些属性并修改其他属性的数据类型等等 问题是如何更新模型以匹配 SQL 中的数据库 这是我的项目的屏幕截图 尝试通过
  • 让基本的 socket.io 示例正常工作

    我什至无法运行非常基本的 socket io 示例 例如其网站欢迎页面上的第一个示例 var io require socket io listen 80 io sockets on connection function socket s
  • Reporting Services:具有父子孙的业务对象数据源

    如何使用 POCO 自定义业务对象创建具有父子孙关系的报表 public class Invoice public List
  • WPF - 检测转换器中的设计模式

    我有一个转换器 我希望能够在设计模式下将值更改为 Visibility Collapsed 没错 它忽略了 GetIsInDesignMode 另外 我通过依赖注入 棱镜 绑定虚拟机 转换器 public object Convert ob
  • war 文件中的可执行文件

    我们希望发布一些帮助程序脚本 shell 脚本 作为应用程序战争的一部分 不幸的是 我们的构建系统 maven 似乎放弃了所有文件的权限 并且脚本最终没有设置可执行位 有可能这样做吗 war 格式支持可执行文件吗 如果是 如何告诉 Mave
  • 使用javascript在html上绘制矩形

    我知道有类似的问题here https stackoverflow com questions 14680690 draw rectangles and annotate webpage 但问题和答案都没有任何代码 我想做的就是将此功能移植
  • PercentRelativeLayout - 缺少布局宽度警告

    我正在尝试支持库中的 PercentRelativeLayout 并且the docs http developer android com reference android support percent PercentRelative
  • Ionic 2 使用 firebase 进行谷歌登录

    我在 firebase 身份验证和 google 提供商方面遇到了一些麻烦 我尝试使用谷歌提供商登录 这工作正常 但后来我想重定向到我的主页 但我遇到了问题 我有一个身份验证提供者 import Injectable from angula
  • Android 14 及更高版本是否可以使用 Java 8 功能Optional 和 Stream

    我想在当前的项目中使用选项和流 我已经进行了很多空检查和很多循环 不久前 我注意到Java 8中有Optional和Streams这样方便的类 我想使用它们 但我不能 因为我的项目的minSdk是14 是否可以使用Java 8功能适用于 A
  • 使用 Codable 序列化为 JSON 时 Swift 字符串转义

    我正在尝试按如下方式序列化我的对象 import Foundation struct User Codable let username String let profileURL String let user User username
  • 如何创建动态索引来获取元组的值?

    在 Python 中 我了解到可以通过动态索引检索元组值 data 1 2 3 4 data 0 for a in range len data print data a 输出 1 2 3 4 如何在 Rust 中做到这一点 我尝试过这样的
  • 将 CSS 和 JS 文件放置在 Mavenized Java Web 应用程序中的最佳位置?

    我在 Maven 中有一个遵循以下结构的 Web 应用程序 src main java resources webapp 最好将它放在主文件夹中 然后 Maven 插件会尝试移动它 或者我应该将它放在 webapp 文件夹中 为什么 如果不
  • PHP PDO MySQL 事务代码结构

    我正在尝试使用 PHP PDO 在 MySQL 中设置我的第一个事务 我只是有一个简单的问题 确定上一个查询是否成功的最佳方法是什么 这是我现在所拥有的 但我宁愿找到一种方法来使用 if 语句测试查询 这几乎是模拟代码 试图获得一个工作模型
  • 几天前创建的分支的 Git rebase

    我需要帮助来理解这种情况下的 git rebase 我查看了 10 天前某人创建的一个分支 我使用 git checkout b
  • 不使用 <<- 赋值的递归函数?

    有了向量 x 我需要在内部函数中递归地更改它 这是我使用的实现 lt lt 全局赋值运算符 outer lt function x lt rep 1 5 inner lt function i if i gt length x return
  • 在 Immutable.js 中获取嵌套值

    根据这里的文档 https facebook github io immutable js docs Map getIn https facebook github io immutable js docs Map getIn 我应该能够通
  • 使用 ipcluster 从从节点读取标准输出

    我已经使用设置了一个集群 ipcluster start n 8 然后使用访问它 from IPython parallel import Client c Client dview c e i for i in c 我正在从属节点 e 0
  • Selenium C# WebDriver:等待元素出现

    我想确保在网络驱动程序开始执行操作之前存在一个元素 我正在尝试让这样的事情发挥作用 WebDriverWait wait new WebDriverWait driver new TimeSpan 0 0 5 wait Until By I
  • Dynamodb 按照 no-sql 设计查询所有记录

    我知道在 dynamodb 中编写查询 但我还是新手 现在对于一个项目来说 我设计的不仅仅是创建一个带有分区键和排序键的表 我的表的无 SQL 数据模型数据结构 据此 我已经实施了 列出 添加 更新 删除 dynamodb 查询 我的问题是
  • Vuejs Axios 数据未显示

    不显示信息的问题在获取时被延迟 我需要任何帮助来解决这个问题 h1 message h1 div class panel panel primary div class panel heading div class row div cla