Vuejs Axios数据未显示

Posted 2023-02-22

【中文标题】Vuejs Axios数据未显示

【英文标题】：Vuejs Axios data not showing

【发布时间】：2019-01-08 23:49:06

【问题描述】：

没有显示信息的问题是获取延迟，我需要任何帮助。

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

//图片view vide

【参考方案1】：

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

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

【参考方案2】：

你不能在promise中传递“this”，你需要将“this”添加到一个变量中。

示例：

var app = new Vue(
       el: '#app',
       data: 
         message: 'Nawfal Kharbouch',
         experiences:[]
       ,
       methods:
        var self = this;
        getExperiences:function()
            axios.get('http://localhost:8080/getexperiences').then(response=>
                self.experiences=response.data;
                console.log(self.experiences);
            ).catch(function(error)
                console.log('erros : ',error);
            )  
        
       ,
        mounted:function()
        this.getExperiences();
        console.log(this.experiences);
         
    ) 

【讨论】：

当我说它给出错误的方法时。没错。***.com/a/51634629/10636297