您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue更改數(shù)組屬性在頁面中不生效如何解決”,在日常操作中,相信很多人在vue更改數(shù)組屬性在頁面中不生效如何解決問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue更改數(shù)組屬性在頁面中不生效如何解決”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
問題描述:
使用vue的方法獲取了數(shù)組數(shù)據(jù),獲取數(shù)據(jù)后為每個數(shù)據(jù)增加edit屬性,初始值均為false,其目的是為了當(dāng)點(diǎn)擊列表中的編輯按鈕時,控制保存與不保存的按鈕的出現(xiàn)與消失,結(jié)果當(dāng)更改數(shù)組中的edit屬性后,頁面并沒有如預(yù)期的那樣當(dāng)edit為true時頁面顯示更改狀態(tài),當(dāng)edit為false時為不更改狀態(tài)
解決方案:
edit是在通過post方法獲取數(shù)據(jù)后增加到vue的data數(shù)據(jù)中的屬性,一開始我的做法先將接收到的數(shù)據(jù)賦值到vue的data中,再對vue的data中的數(shù)據(jù)增加edit屬性,這樣在改變edit的之后,雖然在js中使用console.log可以看到該值已經(jīng)發(fā)生變化,但頁面中的data值并沒有發(fā)生變化。
正確的做法應(yīng)該是先為接收到的數(shù)據(jù)初始化edit屬性,再將處理后的數(shù)據(jù)賦值給vue的data。
代碼如下
<tbody> <tr v-for="(book,index) in bookList"> <td> <span v-on:click="book.edit=true" v-show=" !book.edit">{{book.orderIndex}}</span> //如果edit屬性為false,則該span出現(xiàn) <input v-show="book.edit" /> //如果edit屬性為true,則該input出現(xiàn) </td> <td> <a v-show="book.edit" v-on:click="book.edit=false" class="btn btn-primary btn-sm"> //如果edit屬性為true,出現(xiàn)不保存(x)按鈕 <i class="glyphicon glyphicon-remove" aria-hidden="true"></i> </a> <a v-show="book.edit" v-on:click="save(book)" class="btn btn-primary btn-sm"> //如果edit屬性為true,出現(xiàn)保存(√)按鈕 <i class="glyphicon glyphicon-ok" aria-hidden="true"></i> </a> </td> </tr> </tbody> <script> var politics = new Vue({ el:"#politics", data:{ bookList:[] }, methods:{ getBookList: function (offset, limit, CatalogueID, searchKey, resId) { this.limit = limit; 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; // 賦值必須寫在屬性初始化的后面,否則改edit不能使頁面屬性變化 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); }) } } }) </script>
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫,Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
到此,關(guān)于“vue更改數(shù)組屬性在頁面中不生效如何解決”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。