Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to solve errors when rendering vue.js data successfully". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Recently, I am working on a vue project, which uses the officially recommended axios request data. The data structure is a first-level object nesting second-level objects. It is found that the first-level object data rendering does not report errors, while the second-level data rendering reports errors. It's very depressing! The data function is as follows

Export default {name: 'hello', data () {return {card: {}}

The data returned is as follows:

{"object": {"subObject": "123",...}}

The reason for the error is that there is no secondary object in the card of the data function return. So it will be wrong.

The solution is:

Export default {name: 'detail', data () {return {loading: false, card: {},}}, created () {this.fetchData ();}, methods: {fetchData () {this.loading = true; let that=this; this.ajax.get (url, {params: {id: "yourId"}}) .then (function (response) {that.loading = false }, function (error) {console.log (error);})}}

Then add the following sentence to html:

Expand knowledge: solve the problem of undefined error of normal objects rendered by Vue component pages

First, the page code: {{options.fileList [0] .fullPath}}

Render the result:

(rendered successfully)

But the console still reported an error:

If I have a friend who has the same problem as me, ten thousand grass-mud horses will float by in my heart, and they all show that they are normal, and I can't bear it. I can't bear to report an error to me when you TM. First of all, I print directly on the page node, OK, no problem, can print it perfectly, and then change my way of thinking. I can see what's going on in mounted. I can print an empty array in mounted. So I should know what the problem is, it should be that when the page is loaded, the data has not yet been sent, but at this time we have already started to use it, so we will report the error of undefined. When the value of the data is passed, the page finds the data and renders it, so the page I see is normal again, so how to solve this problem?

The answer is also very simple, just add a judgment to the node you render.

In this way, the data will not be read when it is found to be undefined, but will be read when there is data. In this way, there will be no undefined error.

This is the end of the content of "how to solve the error in the successful rendering of vue.js data". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.