我有一个用例,其中有一个自定义Vue组件,该组件使用JSON动态填充其子组件。创建此顶级vue组件后,它将使用JSON加载所有子组件。我有一项规定,当我更新其呈现的JSON时,可以在表单上添加其他控件。
因此,当我使用AJAX在后端更新JSON时,我想在成功发布后重新呈现所有内容。
我还碰到过几篇文章,说重新生成Custom Vue上的Form组件应该使用v-show和/或v-if指令进行处理。 这不适合我的用例。
我研究了forceUpdate API,该API仅适用于当前组件。它不会影响子组件。
在我的用例中,处理每个组件上的forceUpdate似乎是唯一的方法?
根据该图,您可以看到MainFrom组件中是顶级组件。以下是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>
这是本节的高级概述
<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>
答案 0 :(得分:1)
forceUpdate()
不会重新呈现子组件的用户界面,但是被跟踪的属性会重新呈现。
以您为例。首先需要将数据绑定到组件。一旦ajax响应返回,您只需调用Vue.set
来更新绑定的数据,它将自动更新子组件