更新vue的data中的元素，vue更新錯誤

2022-02-24 01:40:01 字數 1786 閱讀 8618

解決方式：用【深拷貝】可以解決，直接對vue操作的【一級資料進行深拷貝】，然後修改

錯誤方式：如果這樣更新：【vue看到的資料位址根本沒有改變】：this.blog_entries_logs[index]['open_detail']=!this.blog_entries_logs[index]['open_detail'];

具體解決：

//


點選部落格引入詳情操作


toggle_blogentry_detail:function


(index),
核心錯誤**：

//


點選部落格引入詳情操作


toggle_blogentry_detail:function


(index),
迴圈：

<


template 


v-for


="(blog_entries_log,index) in blog_entries_logs"


>
事件繫結：

<


div 


@click.stop


="toggle_blogentry_detail(index)"


style


="font-size: 20px;cursor: pointer;"


>
v-show顯示：

<


tr class


="blog_load_tr"


v-show


="blog_entries_log.open_detail"


>
完整vue**：

<


script


>


blog_entry_box_vue


=new


vue(,


beforemount:


function


(), methods:,


//初始化資料


init_data:


function


() console.log(


'init_data');


},//點選部落格引入詳情操作


toggle_blogentry_detail:


function


(index),


time_format_today:


function


(ts) ,


time_format_tosecond:


function


(ts) 


}});


script


>
解決方式：

用【深拷貝】可以解決，直接對vue操作的【一級資料進行深拷貝】，然後修改

問題思考：

估計vue基於資料的更新只檢查一級資料的位址是否改變，如果位址改變才基於這個更新

如果這樣更新：【vue看到的資料位址根本沒有改變】：this.blog_entries_logs[index]['open_detail']=!this.blog_entries_logs[index]['open_detail'];

具體解決：

//


點選部落格引入詳情操作


toggle_blogentry_detail:function


(index),
錯誤位置的介面：

Vue中更新data值頁面不渲染的問題

不知道大家有沒有遇到過更新vue中data的值而頁面沒有同步渲染。1.通過length修改陣列 通過索引修改陣列的值 2通過物件.屬性動態新增物件 按鈕 解決方案 1.通過length 修改陣列長度以及通過索引修改或者增加陣列的值無法動態渲染到頁面 資料中已經有了但是頁面不渲染 解決用陣列的方法pu...

Vue 元件中的data資料

1.元件可以有自己的 data 資料 2.元件的 data 和 例項的 data 有點不一樣,例項中的 data 可以為乙個物件,但是 元件中的 data 必須是乙個方法 3.元件中的 data 除了必須為乙個方法之外,這個方法內部,還必須返回乙個物件才行 4.元件中 的data 資料,使用方式,和...

vue系列 重置data中的值

我們提交完表單之後想要重置表單的資料，但是乙個乙個賦值又很麻煩，所以有了下面的方案。元件當前data物件 this data 元件初始化狀態下的data物件 this options.data 重置data物件到初始化狀態 object.assign this data,this options.d...