The reason why uniapp does not render the page after changing the data and the solution

When using uniapp to develop projects, we often encounter the problem that the page does not render automatically after changing the page data. This situation is usually caused by the data not being bound to the page or the data not being modified correctly.

The following are some possible reasons and solutions for the page not rendering after changing the data.

1. Data is not bound correctly

In uniapp, page data needs to be bound to the page through the data attribute. If the data is not bound to the page correctly, the page will not automatically render after changing the data.

Solution:

In the data attribute of the page, define the data that needs to be bound. For example:

export default {
  data() {
    return {
      message: 'Hello uniapp!'
    }
  }
}

Use {{message}} in the page to bind data to the page.

2. The setData method is not used when changing data

In vue, changing data requires using the Vue.set or Vue.$set method. In uniapp, changing data requires using the setData method.

Solution:

Use the setData method to set data. For example:

this.setData({
  message: 'Hello uniapp!'
})

3. The data has not been modified correctly

In uniapp, when modifying data through setData, you need to pay attention to the modified data is a copy, not the original The data. If the changed data is not a copy, page rendering will not be triggered.

Solution:

Make sure that the data to be modified is a copy. Generally, you can create new data by using Object.assign or destructuring assignment.

For example:

let newData = Object.assign({}, this.data.message, {content: 'Hello uniapp!'});
this.setData({
  message: newData
})

4. Problems caused by the wx:if instruction

When using the wx:if instruction, when the condition becomes true, it will Re-render the page. But when the condition becomes false, the page node will be destroyed. At this time, the setData operation will cause the data to fail to be rendered.

Solution:

Use the wx:else or wx:elif directive instead of the wx:if directive to ensure that the page node will not be destroyed. For example:

<view wx:if="{{show}}">
  ...
</view>
<view wx:else>
  ...
</view>

The above are some reasons and solutions that may cause the page not to be rendered after changing the data. During the development process, you need to pay attention to using the correct method to modify the data and ensure that the data is correctly bound to the page. At the same time, you need to pay attention to the problems that the wx:if instruction may cause, and use the wx:else or wx:elif instruction instead of the wx:if instruction as much as possible.

The above is the detailed content of The reason why uniapp does not render the page after changing the data and the solution. For more information, please follow other related articles on the PHP Chinese website!