[Vue warn]: Ошибка при рендеринге: «Ошибка типа: объект не определен»

Question

<script>
        const app = new Vue({
            el: '#app', 
            data:{
                results:{}
            },
            mounted()
            {
                axios.get('{{ route('request.data') }}').then(response=>this.results = response.data)
            }
        });
    </script>

<span class="company-value" v-text="results.request_stats.new"></span>

Как и в заголовке, это ошибка, которую я получаю.но когда я console.log(object) значение там, и оно не является нулевым.Так в чем же смысл этой ошибки

Примечание: object = results.request_stats

Answer 1

Вы должны объявить и присвоить какое-либо значение, например {} или [] для привязки, в противном случае вы получите неопределенную ошибку для request_stats.new

const app = new Vue({
            el: '#app', 
            data:{
                results:{request_stats:{}},
                loading:true
            },
            mounted()
            {
              var vm = this;
               setTimeout(function(){ 
                vm.loading = false;
                vm.results.request_stats.new = "Niklesh Raut";
               }, 1000);
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div>
<span class="company-value" v-text="results.request_stats.new"></span>
<div v-show="loading">loading...</div>
</div>
</div>

Без присвоения, которое дает ошибку

const app = new Vue({
            el: '#app', 
            data:{
                results:{},
                loading:true
            },
            mounted()
            {
              var vm = this;
               setTimeout(function(){ 
                vm.loading = false;
                vm.results.request_stats.new = "Niklesh Raut";
               }, 1000);
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div>
<span class="company-value" v-text="results.request_stats.new"></span>
<div v-show="loading">loading...</div>
</div>
</div>