Shulou(Shulou.com)06/03 Report--

This article focuses on "how to solve the problem that Vue bound objects and array variables cannot be rendered after changes". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to solve the problem that Vue bound objects and array variables cannot be rendered after changes."

Project scenario:

There is a tag on the page display, and we need to display the list data dynamically. Since there are other values to display besides the list values on our page, the data structure of the list data is an array under an object. After dynamically modifying the data, it is found that there is no automatic rendering.

Problem description:

Click the button "click me!" Although the data is changed and output on the console, the list data is not rendered.

The code is as follows:

Click me! {{I + ":" + item}} let app = new Vue ({data: function () {return {form: {}) Methods: {pushDataToDataList () {if (this.form.dataList = = null) {this.form.dataList = []} this.form.dataList.push ("abc" + this.form.dataList.length) console.log (this.form.dataList)}}) .$ mount ('# app')

Cause analysis:

After consulting the official documents, we found the following paragraph

Due to the limitations of JavaScript, Vue cannot detect changes in arrays and objects. Nevertheless, there are some ways to avoid these limitations and ensure their responsiveness.

For objects: Vue cannot detect the addition or removal of property. Because Vue performs an getter/setter transformation on property when the instance is initialized, property must exist on the data object for Vue to convert it to responsive.

For arrays: Vue cannot detect changes in the following arrays:

When you directly set an array item using the index, for example: vm.items [indexOfItem] = newValue

When you modify the length of an array, for example: vm.items.length = newLength

The reason is clear here, our data is not rendered because at the beginning, there is no dataList attribute in the form under data, so even if the value changes later, Vue will not be able to detect it. And it's not just a logarithmic array, but even a js object. In addition, directly pressing the subscript to modify the elements of the array does not trigger view rendering.

The following array methods trigger array rendering:

Push (element) / / add elements to the end of the array

Pop () / / deletes the last element of the array and returns it

Shift () / / deletes the first element of the array and returns it

Unshift (ele1, ele2, … , eleN) / / add one or more elements to the beginning of the array and return a new length

Splice (start, deleteCount?,... Item) / / Delete the element in the array and replace it with the new element at its location

Sort () / / sorts the array and modifies the location of the array elements

Reverse () / / reverses the array element, which modifies the position of the array element

Solution:

1. In the form object under data, set the dataList property. Because the front end knows what the structure of the code is when processing the data, it is also convenient for subsequent development to understand if it is set up in advance. Recommended use

Data: function () {return {form: {dataList: null}

two。 Use the this.$set () method

PushDataToDataList () {if (this.form.dataList = = null) {/ / first set the dataList property this.$set (this.form, 'dataList', [])} this.form.dataList.push ("abc" + this.form.dataList.length) console.log (this.form.dataList) under form. I believe you have a better understanding of "how to solve the problem that Vue bound objects and array variables cannot be rendered after changes". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.