如何强制 VueJS 自定义组件重新渲染自身及其所有子组件 [英] How to force VueJS custom component to re-render itself and all its child component
问题描述
我有一个用例，我有一个自定义 Vue 组件，它使用 JSON 动态填充其子组件.创建此顶级 vue 组件时，它会使用 JSON 加载所有子组件.我有一个规定，当我更新它呈现自身的 JSON 时，我可以在表单上添加额外的控件.
因此，当我使用 AJAX 在后端更新 JSON 时，我希望在成功发布后重新渲染所有内容.
我还看到几篇文章说在自定义 Vue 组件上重新生成表单应该使用 v-show 和/或 v-if 指令处理.这不适合我的用例.
我研究了
根据图表，您可以看到 MainFrom 组件中是顶级组件.以下是 MainForm 的模板:
<div><div v-for="(entity, index) of mySchemaChunks ><FormSection :componentList="entity"/></模板><脚本>导出默认{店铺，计算:{mySchemaChunks() {//从模式返回块(模式存储在 Vuex 中)//其中每个块都是数组(模式的段)//每个块都是一个部分，有自己的列表//控制.}},方法: {addNewJsonSchemaNodes() {//此函数将在后端更新主 Json 模式//使用用于生成 JSON 的 AJAX//我们生成 MainFrom 及其所有子项//当 App 初始化时，它准备要生成的 JSON//MainForm 并将该 JSON 作为模式存储在 Vuex 模块中//和模型对象//我在这里做了一个 AJAX 帖子，它只向我发送状态 200//这不足以让我重新渲染并生成所有//动态组件//可能是我应该在成功后尝试取回 JSON//在后端更新 Master JSON ...以便我可以更新//我的 Vuex 模块架构和具有新值的模型对象 ...//这应该可以解决问题，所有组件(父组件)//孩子将被渲染......??//好的 .. 现在我从 AJAX 帖子中取回数据//现在正在渲染整个表单}}}
这是部分的高级概述
<div>//渲染传递给它的实体列表作为 v-for 中的属性//这将添加动态 Vue 组件作为其子组件</模板>
forceUpdate() 不会重新渲染子组件 UI，但被跟踪的属性会.
就你而言.您首先需要将数据绑定到组件.一旦ajax响应返回，你只需调用Vue.set来更新绑定的数据，它会自动更新子组件
I have a use case where I have a custom Vue Component that populates its child components dynamically using the JSON. When this top level vue component is created it loads all the children components using the JSON. I have a provision where I can add additional controls on the form when I update the JSON from which it renders itself.
So when I update the JSON on backend using AJAX, I would like re-render everything upon successful post.
Also I came across few articles that say that the regenerating the Form on Custom Vue component should be handled using v-show and/or v-if directive. This will not fit with my use case.
I looked into forceUpdate API, which is applicable for current component only. It does not affect child components.
So looks like handling forceUpdate on every component is the only way to go in my use case?
Based on the diagram you can see that in the MainFrom component is top level component. Following is the template for the MainForm:
<template>
<div>
<div v-for="(entity, index) of mySchemaChunks >
<FormSection :componentList="entity" />
</div>
</div>
</template>
<script>
export default {
store,
computed: {
mySchemaChunks() {
// returns the chunks from schema (schema is stored in Vuex)
// where each chunks is array (segments of schema)
// Each chunk is a section that has its own list of
// controls.
}
},
methods: {
addNewJsonSchemaNodes() {
// This function will update master Json schema in the backend
// using AJAX which was used to generate the JSON from which
// we generate the MainFrom and all its children
// When App is initialized it prepares the JSON to generate
// MainForm and store that JSON in the Vuex module as schema
// and model object
// I do an AJAX post here which only send me status 200
// This is not enough for me to re-render and generate all
// dynamic component
// May be I should try to get back the JSON after successful
// update of Master JSON in backend ... so that I can update
// my Vuex module schema and model object with new values ...
// And that should do the trick and all components (parent to
// children will be rendered ...????
// Edit: OK.. Now I am getting the data back from AJAX post
// which is now rendering the entire form
}
}
}
</script>
Here is the high level overview of section
<template>
<div>
// Render the list of entity passed to it as property in v-for
// This will add the dynamic Vue components as its children
</div>
</template>
forceUpdate() won't rerender children component UI, but tracked properties will.
In your case. You need to bind the data to component at first. Once ajax response back, you just call Vue.set to update the data bound and it will automatically update the children components
这篇关于如何强制 VueJS 自定义组件重新渲染自身及其所有子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
