只是一个简单的问题。
你能强迫Vue.js重新加载/重新计算所有内容吗?如果有,怎么做?
只是一个简单的问题。
你能强迫Vue.js重新加载/重新计算所有内容吗?如果有,怎么做?
当前回答
使用vm。美元(varName,价值)。
在Change_Detection_Caveats中查看详细信息
其他回答
有两种方法,
你可以在你的方法处理程序中使用$forceUpdate()
<您的组件@click = " reRender ()" > < /组件>
<script>
export default {
methods: {
reRender(){
this.$forceUpdate()
}
}
}
</script>
你可以给你的组件一个:key属性,并在想要渲染时增加
<your-component:key="index" @click="reRender()" > < /组件>
<script>
export default {
data() {
return {
index: 1
}
},
methods: {
reRender(){
this.index++
}
}
}
</script>
为我工作
data () {
return {
userInfo: null,
offers: null
}
},
watch: {
'$route'() {
this.userInfo = null
this.offers = null
this.loadUserInfo()
this.getUserOffers()
}
}
添加:key到vue-router库的router-view组件的方法会引起我的fickers,所以我使用vue-router的“组件内保护”来拦截更新,并在同一路由上的路径更新时相应地刷新整个页面(如$router. exe)。美元,路由器。推,路由器。替换也无济于事)。唯一需要注意的是,通过刷新页面,我们暂时打破了单页应用行为。
beforeRouteUpdate(to, from, next) {
if (to.path !== from.path) {
window.location = to.path;
}
},
如果你的URL在加载组件时也发生了变化,你可以在:key属性中使用它。如果你直接在router-view标签上使用它,效果会特别好。这与添加的键的benedit是一个实际绑定到页面内容的值,而不仅仅是一些随机数。
<router-view :key="this.$route.path"></router-view>
这似乎是matthiasg关于这个问题的一个非常干净的解决方案:
你也可以使用:key=" somvariableunderyourcontrol ",当你想要完全重建组件时改变键
对于我的用例,我将Vuex getter作为道具提供给组件。Vuex会以某种方式获取数据,但反应性不会可靠地重新呈现组件。在我的例子中,将组件键设置为道具上的某个属性可以保证在getter(和属性)最终解析时进行刷新。