Question

[Vue 警告]：渲染时出错：“TypeError：对象未定义”

2018-06-09

3760

javascript vue.js vuejs2

<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

一种解决方法是将以下代码片段添加到您的 span 中

v-if="results && results.request_stats"

kabapy

2019-10-21

Answer 2

您必须声明并分配一些值（如 {} 或 [] ）来绑定，否则您将收到 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>