[Vue warn]: Error in render: "TypeError: object is undefined"

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>

As in title this is the error I am getting. but When I console.log(object) the value is there and it is not null. So what is the point of this error

Note: object=results.request_stats

added the code. i am calling an ajax request on the route and it is returning back an object results — Ahmed Nawaz Khan
– Ahmed Nawaz Khan, Commented Jun 9, 2018 at 8:34
Please add the relevant code. There is no object, no console.log, and no results.request_stats in your example. — str
– str, Commented Jun 9, 2018 at 8:35

kabapy · Accepted Answer · 2019-10-21 18:24:51Z

1

a work around is to add to your span the following snippet

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

answered Oct 21, 2019 at 18:24

kabapy

1772 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niklesh Raut · Accepted Answer · 2018-06-09 09:43:13Z

0

You have to declare and assign some value like {} or [] to bind , otherwise you will get Undefined error for 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>

Without assigning, which is giving error

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>

edited Jun 9, 2018 at 9:43

answered Jun 9, 2018 at 8:36

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

7 Comments

Ahmed Nawaz Khan Over a year ago

I have to initialize every object and array which can be dynamic when I get them from the server??

Niklesh Raut Over a year ago

@AhmedNawazKhan: Yes boss to bind object.

Niklesh Raut Over a year ago

You can also read about how data binds

Ahmed Nawaz Khan Over a year ago

well this is insane. the data may be dynamic. you may never know what is comming arrays objects etc

Niklesh Raut Over a year ago

Can you share any situation where you dont know about data type ? Array have object and object have array.

|

Collectives™ on Stack Overflow

[Vue warn]: Error in render: "TypeError: object is undefined"

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related