如何呈现标记,以便使用Vue组件减少FLOUT?

时间:2019-08-24 22:48:39

标签: vue.js vue-component

我需要渲染一个项目列表(服务器渲染),每个项目都有一个倒数计时器。当我在每个dom元素中都只有一个view组件时,POP那里什么也没有,那么view组件将呈现倒计时...现在我也知道服务器端的这个值,是否还有一些立即渲染它的方法,以便vue组件将接管渲染? (这有意义)

就像服务器上的html一样,呈现50:32 (minutes, seconds),但是随后视图组件接管,将其删除并开始倒计时50:3150:30 ...等。

我尝试将服务器val作为道具传递并只是将其渲染到节点内,但仍然弹出(我认为是因为组件正在渲染...)

这是否可行,还是我被装载机卡住了?

1 个答案:

答案 0 :(得分:0)

谢谢您的相关问题,根据我的理解,我提出了一个答案。

您试图将属性从服务器动态传递到已创建的视图实例。这是不可能的,因为Vue不允许将新的根级反应性属性动态添加到已创建的实例中。但是,可以使用

将反应属性添加到嵌套对象

Vue.set(object,propertyName,value)方法:

Vue.set(vm.someObject, 'b', 2)

访问Vue的官方文档以了解更多信息

此处:https://vuejs.org/v2/guide/reactivity.html

希望它能使您走上正轨