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

In this article Xiaobian for you to introduce in detail the "vue changes to the properties of the array in the page does not take effect how to solve", detailed content, clear steps, details handled properly, I hope that this "vue changes to the array of attributes in the page does not take effect how to solve" the article can help you solve doubts, the following editor's ideas slowly in-depth, together to learn new knowledge bar.

Problem description:

The method of vue is used to obtain the array data. After obtaining the data, the edit attribute is added to each data, and the initial value is false. The purpose is to control the appearance and disappearance of the save and unsaved buttons when the edit button in the list is clicked. As a result, when the edit property in the array is changed, the page does not display the change state as expected when edit is true, and does not change state when edit is false.

Solution:

Edit is an attribute that is added to the data data of vue after obtaining the data through the post method. At the beginning, I first assign the received data to the data of vue, and then add the edit attribute to the data in the data of vue, so that after changing the edit, although you can see that the value has changed by using console.log in js, the value of data in the page has not changed.

The correct thing to do is to initialize the edit property for the received data, and then assign the processed data to the data of vue.

The code is as follows

{{book.orderIndex}} / / if the edit attribute is false, the span appears / / if the edit attribute is true, the input appears / / if the edit attribute is true, the do not save (x) button appears / / if the edit attribute is true The √ button var politics = new Vue ({el: "# politics", data: {bookList: []}, methods: {getBookList: function (offset, limit, CatalogueID, searchKey, resId) {this.limit = limit) appears This.offset = offset; this.CatalogueID = CatalogueID; this.searchKey = searchKey; this.resId = resId; this.$http.get ("/ BookAdmin/getBookList?offset=" + this.offset + "& limit=" + this.limit + "& CatalogueID=" + this.CatalogueID + "& searchKey=" + this.searchKey+ "& resId=" + this.resId). Then (function (resp) {resp.data.books.forEach (function (o, I) {o.edit = false) }) this.bookList = resp.data.books; / / assignment must be written after the property initialization, otherwise changing edit will not change the page property this.bookTotalCount = resp.data.totalCount; var pageNo = this.offset / this.limit + 1; var totalPage = Math.ceil (this.bookTotalCount / this.limit); divpager (pageNo, totalPage, this.bookTotalCount, this.CatalogueID, this.searchKey, this.resId) })}) read here, this "vue changes array attributes in the page does not take effect on how to solve" the article has been introduced, want to master the knowledge of this article still need everyone to practice and use to understand, if you want to know more related articles, welcome to follow the industry information channel.

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.