1. 程式人生 > >vue 資料更新 檢視不重新整理

vue 資料更新 檢視不重新整理

問題描述:

 data () {
    return {
      goods:0,
      dataGoods:[
      {id:1,title:'1',imgsrc:'./src/img/timg1.jpg',price:10.00},
      {id:2,title:'2',imgsrc:'./src/img/timg2.jpg',price:20.02},
      {id:3,title:'3',imgsrc:'./src/img/timg3.jpg',price:30.09},
      {id:4,title:'4',imgsrc:'./src/img/timg1.jpg',price:40.40
}, {id:5,title:'1',imgsrc:'./src/img/timg3.jpg',price:50.70}, {id:6,title:'2',imgsrc:'./src/img/timg2.jpg',price:60.65}, {id:7,title:'3',imgsrc:'./src/img/timg1.jpg',price:70.43}, {id:8,title:'4',imgsrc:'./src/img/timg2.jpg',price:80.66}, ], shopcart:[ {id:11,title:'煙臺大櫻桃 大櫻桃,也稱西洋櫻桃,南方區域一般稱為“車釐子”'
,price:10.00,number:1}, {id:12,title:'商品1',price:10.01,number:2}, {id:13,title:'商品2',price:21.44,number:1}, {id:14,title:'商品3',price:25.78,number:1}, {id:15,title:'商品4',price:1.88,number:1}, {id:16,title:'商品5',price:108.09,number:1}, ] } }

dataGoods 的資料新增到shopcart

淺賦值dadaGoods的資料,然後新增 numer 屬性shopcart
shopcart 新增新資料的時候可以重新整理檢視,但是不能後面對number的update 不能更新檢視
即 vue 不能監聽新添資料後的update;

原因:

淺複製資料不能被shopcart的資料監聽,屬於引用狀態,雖然shopcart 內的資料更新了但是更新dataGoods的資料

解決方案

對**dataGoods**的資料深複製後再新增帶shopcart中 

相關推薦

vue 資料更新 檢視重新整理

問題描述: data () { return { goods:0, dataGoods:[ {id:1,title:'1',imgsrc:'./src

vue 解決介面資料改變 檢視能實時響應的問題

問題:在vue專案中,新增,刪除,更改等操作後,介面資料已經更改,但是檢視需重新整理才可更改 原因:因為資料層次太多,render函式沒有自動更新 解決:手動強制重新整理 呼叫this.$forceUpdate(); 方法 var flag = true; for (let k

WKWebView載入Http頁面更新重新整理問題及解決辦法

WKWebView在載入HTTP的H5頁面,由於沒有HTTPS的加密傳輸,所以會在本地快取CSS樣式、Html網頁(類似電腦上下載到本地的網頁)等內容,所以在後臺更改H5頁面之後,APP由於快取的問題不能展示更改後的頁面 iOS7的系統繼續使用UIWebView載入不會出現

一個“錯誤”的vuex寫法:vuex重新整理資料但是檢視沒有重新整理

這是個很尷尬的問題,讓我猜猜看你的程式碼是不是這樣寫的: <template> <div id="app"> <img src="./assets/logo.png

利用ajax和JSP技術實現網頁中表單的區域性重新整理(只重新整理表單資料,而重新整理整個頁面)

在web開發中有時有區域性重新整理的需求,這樣做的好處是克服了頁面整體重新整理對網路速度受限的情況。 1.MySQL資料表如下(簡單舉例): 表名:stu_info stuId                 int                    PK    NN

問題:Vue.set更新檢視的問題及Vue.set和vm.$set的區別

在vue中動態新增屬性並更新dom時碰到了如下問題。 和下面這篇部落格碰到的問題一摸一樣。 傳送門 都是第一次Vue.set有效,之後再變動set新增的屬性的值時無效。 用評論中

解決vue在IE中,資料同步,檢視更新,開啟ie除錯時資料資料檢視更新了的問題

最近專案要支援ie,這也是最令人蛋疼的地方,相信不少朋友被之前的ie低版本坑的不輕,廢話不多說,先來介紹一下,ie11中出現的奇葩現象 當你用vue加axios,發請求,請求後端介面更新資料,實現檢視同步更新,這個操作在ie本地,谷歌以及360等瀏覽器是沒有問題的,但是鄙人

vue——路由變化頁面資料重新整理問題

每天記錄一點點,把我遇到的問題記錄下來, 希望可以幫助到更多和我遇到同樣問題的人。 問題描述:通過調介面,動態顯示幫助頁面的問題列表, 問題列表有多級,當點選的這個問題沒有下一級問題的時候跳入內容頁。 問題出在,我在電腦上做移動端頁面的時候,相繼跳到詳情頁,我想返回,點選 按鈕

解決vue中物件屬性改變檢視更新的問題

問題描述: 頁面input的值修改後,物件的屬性值並未發生變化 問題解決: vue雙向繫結時,writable(屬性值是否可以重寫)預設為false 將其改為true即可。 Object.defineProperty(obj, objKey, { &nbs

vue資料繫結陣列,改變元素時更新view問題

關於這個問題,官網上說的很清楚官方文件  寫個例子HTML<body> <div class="box"> <div v-for="aa in aas">{{aa}}</div> <button @click="chan

微信小程式修改資料重新整理頁面更新資料

先將資料儲存到本地快取,如下: wx.setStorageSync('caseid', this.data.id) wx.setStorageSync('newmsg', data) //data是一個物件 在需要修改的頁面獲取本地快取的資料,如下: var newmsg = wx.

vue中修改了資料檢視無法更新的情況

轉自:https://blog.csdn.net/github_38771368/article/details/77155939 僅用於學習,違者必究! 我們有時候常碰到vue中明明修改了資料,但是檢視無法更新,因此我總結了一點點碰到此類的情況: 1、v-for遍

微信小程式如何在回到當前頁面在重新整理當前頁面的情況下更新資料

首先微信小程式前端是資料驅動,在單個頁面時更新資料必會重新整理頁面,所以想要實現此功能那就要在上一個或多個頁面更改此頁面的資料,在回到此頁面時,其實頁面已重新渲染完了 //假設要更改的陣列為goods[1,2,3,4,5,6] let pages = get

vue 路由變化頁面資料重新整理問題(快取)

每天記錄一點點,把我遇到的問題記錄下來, 希望可以幫助到更多和我遇到同樣問題的人。 問題描述:通過調介面,動態顯示幫助頁面的問題列表, 問題列表有多級,當點選的這個問題沒有下一級問題的時候跳入內容頁。 問題出在,我在電腦上做移動端頁面的時候,相繼跳到詳情頁,我想返回,點選 按鈕,直接跳轉到了如上第一張圖的

Ajax對錶格中的資訊重新整理頁面進行更新資料

html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

IE11 vue +webpack 專案中資料更新後頁面沒有重新整理問題

vue +webpack 專案中資料更新後頁面沒有重新整理問題,ie11下,如果GET請求請求相同的URL,預設會使用之前請求來的快取資料,而不會去請求介面獲取最新資料,我用的解決方法是在每個請求傳送前

vue數組操作更新視圖問題

auth erb lee 修改 CA lte webpack 通過 book vue 觀察數組的變異方法 更新視圖 push() pop() shift() unshift() splice(i,n,arr) sort(xx) reverse() ex: app.book.

Vue data更新了,但檢視更新

問題:使用 Vue.set(target,key,value) 或 this.$set(target, key, value) 更新data中json物件的資料後,檢視層還是沒有更新(data的資料更新了)。   解決方法: 使用 Vue.delete(target,key) 或

vue實現前進重新整理後退重新整理效果

最近在用vue嘗試著做移動端的專案。希望實現前進重新整理、後退不重新整理的效果。即載入過的介面能快取起來(返回不用重新載入),關閉的介面能被銷燬掉(再進入時重新載入)。例如對a->b->c 前進(b,c)重新整理,c->b->a 後退(b,a)不重新整理。 由於 keep

vue重新整理當前路由:router-view 複用元件時重新整理的3種解決方案總結

vue-router是Vue.js官方的路由外掛,它和vue.js是深度整合的,適合用於構建單頁面應用。vue的單頁面應用是基於路由和元件的,路由用於設定訪問路徑,並將路徑和元件對映起來。傳統的頁面應用,是用一些超連結來實現頁面切換和跳轉的。在vue-router單頁面應用中,則是路徑之間的切換,也