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: {
}
})