Vuejs Axios 데이터가 표시되지 않음

Vuejs Axios 데이터가 표시되지 않음

정보를 표시하지 않는 문제는 가져오기가 지연되고 있습니다. 이 문제에 대한 도움이 필요합니다.

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

뷰즈

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

정보를 표시하지 않는 문제는 가져오기가 지연되고 있습니다. 이 문제에 대한 도움이 필요합니다.//Google Chrome 콘솔

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

//사진 보기 비디오

직접 사용하는 대신 변수에 전달해야 합니다.

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

약속 내부에는 "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);
         }
    }) 

언급URL : https://stackoverflow.com/questions/51632733/vuejs-axios-data-not-showing