What should I do if uniapp onload data cannot be rendered?

Recently, I was using uniapp to develop a small program project, and encountered a problem, that is, the data on the page could not be rendered. After some exploration and thinking, I finally found a solution.

Question

I initiated a request to obtain data in the onLoad life cycle function of the page, assigned the data to the attribute in data, and used the attribute in the template for rendering. But a problem occurred, the corresponding data could not be rendered in the template.

First, I eliminated some common errors, such as misspellings of variable names, mismatched data types, etc. However, these did not solve the problem.

Solution

I realized that the data may be rendered before it is obtained, so it is not feasible to render directly in the onLoad life cycle function. To address this problem, I tried some solutions:

1. Place the data request in the component's created life cycle function.

This method is basically unfeasible because the data request is performed asynchronously in the created life cycle function, while the rendering component is performed synchronously and is rendered before the data is obtained.

2. Use watch to monitor data changes.

This method is feasible in my actual operation. Changes in data are monitored through watch. Once the data is obtained successfully, the watch function will be triggered and then rendered.

Code display:

export default {
  data() {
    return {
      dataList: []
    }
  },
  watch: {
    dataList: function(val) {
      if (val.length > 0) {
        this.$nextTick(() => {
          //渲染组件的操作
        })
      }
    }
  },
  onLoad() {
    // 发起数据请求,并在成功后赋值给dataList
  }
}

It should be noted here that after the data is successfully obtained, the Vue.nextTick method needs to be used to render the component, otherwise the component may not be completely rendered.

Conclusion

In uniapp, it is not feasible to directly render data in the onLoad life cycle function. You need to use watch to monitor data changes and render the component after the data is successfully obtained.

The above is the detailed content of What should I do if uniapp onload data cannot be rendered?. For more information, please follow other related articles on the PHP Chinese website!