How to solve the problem that Vue bound objects and array variables cannot be rendered after changes
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!
