只是一个简单的问题。
你能强迫Vue.js重新加载/重新计算所有内容吗?如果有,怎么做?
只是一个简单的问题。
你能强迫Vue.js重新加载/重新计算所有内容吗?如果有,怎么做?
当前回答
除了页面重载方法(闪烁),没有一个适合我(:键没有工作)。
我发现这个方法从旧vue.js论坛,这是为我工作:
https://github.com/vuejs/Discussion/issues/356
<template>
<div v-if="show">
<button @click="rerender">re-render</button>
</div>
</template>
<script>
export default {
data(){
return {show:true}
},
methods:{
rerender(){
this.show = false
this.$nextTick(() => {
this.show = true
console.log('re-render start')
this.$nextTick(() => {
console.log('re-render end')
})
})
}
}
}
</script>
其他回答
<my-component :key="uniqueKey" />
同时使用。$set(obj,'obj_key',value) 并且每次更新object (obj)值时更新uniqueKey 对于每一次更新this. uniquekey++
这对我来说很管用
请读一读 http://michaelnthiessen.com/force-re-render/
可怕的方式:重新加载整个页面 更好的方法:使用Vue的内置 最好的方法:在你的 组件
<template>
<component-to-re-render :key="componentKey" />
</template>
<script>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
</script>
在某些情况下,我也用watch。
为我工作
data () {
return {
userInfo: null,
offers: null
}
},
watch: {
'$route'() {
this.userInfo = null
this.offers = null
this.loadUserInfo()
this.getUserOffers()
}
}
如果你的URL在加载组件时也发生了变化,你可以在:key属性中使用它。如果你直接在router-view标签上使用它,效果会特别好。这与添加的键的benedit是一个实际绑定到页面内容的值,而不仅仅是一些随机数。
<router-view :key="this.$route.path"></router-view>
<router-view :key="$route.params.slug" />
只需使用你的任何参数的关键,它的自动重载子..