Vue.js 强制重新渲染包含 v-once 指令的组件 [英] Vue.js force re-render of component which contains v-once directive

问题描述

Vue 2.0

我有一个包含使用 v-once 指令来防止重新渲染的 div 的组件.当 URL 参数改变时，这个相同的组件会更新它显示的数据(即点击 vue-router 链接，改变组件中使用的 url 和参数).

该组件使用新数据(基于 URL 参数)成功重新渲染所有内容除了带有 v-once 的 div指示.该 div 不会刷新、重新加载或重新呈现.

我尝试使用观察者和 vm.$forceUpdate()当数据发生变化时，但这没有任何影响.

有没有办法强制整个组件重新渲染?特别是带有 v-once 指令的部分?我希望组件在 URL 参数更改时重新呈现，但仍然不会在数据更改时重新呈现.

解决方案

这个用例可以通过将 v-once 组件包围在容器中，然后触发组件重新渲染来解决.

我能够通过在容器内的相关组件上使用 :key="$route.params.id" 来触发组件重新渲染.

即

<custom-component :key="$route.params.id"></custom-component>

Vue 2.0

I have a component which contains a div using the v-once directive to prevent re-render. This same component updates the data it displays when URL parameters change (i.e. vue-router link is clicked, changing url and parameter used in component).

The component successfully re-renders everything with the new data (based on the URL params) except the div with the v-once directive. That div is not refreshed, reloaded, or re-rendered.

I have attempted to use a watcher and vm.$forceUpdate() when the data changes, but this has not had any effect.

Is there a way to force the whole component to re-render? Specifically the portion with the v-once directive? I would like the component to re-render on URL param change, but still not re-render on data change.

解决方案

This use case can be resolved by surrounding the v-once component in a container, and then triggering component re-render.

I was able to trigger the component re-render by using :key="$route.params.id" on the component in question from within the container.

i.e.

<div id="container-component">
  <custom-component :key="$route.params.id"></custom-component>
</div>

这篇关于Vue.js 强制重新渲染包含 v-once 指令的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！