vue 數據刷新后,頁面沒有聯動更新
因為vue有個就近原則,只會刷新部分內容而不更新整體,這時可以給容器加一個key去動態獲取,
如下加了一個key=getTime,通過watch去監聽
//表格自定義列順序
Vue.component('table-cols-sort', {
data: function(){
return{
getTime: new Date().getTime()
}
},
props: ['data'],
template: `<div class="cols-sort layui-form" lay-filter="cols-sort" :key="getTime">
<div class="">
<div class="col-sort-save" @click="colSortSave">保存</div>
<div class="layui-icon layui-icon-close col-sort-close" @click="colSortClose"></div>
<div class="clear"></div>
</div>
<div class="col-sort selected" v-for="(item,index) in data.cols[0]" :key="index">
<input type="checkbox" lay-filter="colSort" :data-index="index" :name="item.field" lay-skin="primary" :title="item.title" checked="">
</div>
</div>`,
watch:{
data: {
handler:function(val,oldval){
this.getTime = new Date().getTime()
},
deep: true//對象內部的屬性監聽,也叫深度監聽
}
},
mounted: function() {
},
updated: function() {
console.log("updated");
},
methods: {
}
})