Как заставить пользовательский компонент VueJS повторно визуализировать себя и весь его дочерний компонент - PullRequest
Новая
       18

Как заставить пользовательский компонент VueJS повторно визуализировать себя и весь его дочерний компонент

0 голосов
/ 27 июня 2018

У меня есть случай, когда у меня есть пользовательский компонент Vue, который динамически заполняет его дочерние компоненты с помощью JSON. Когда этот компонент vue верхнего уровня создан, он загружает все дочерние компоненты, используя JSON. У меня есть положение, в котором я могу добавить дополнительные элементы управления в форму при обновлении JSON, из которого она отображается.

Поэтому, когда я обновляю JSON на бэкенде с помощью AJAX, я хотел бы перерисовать все после успешной публикации.

Кроме того, я наткнулся на несколько статей, в которых говорится, что регенерация компонента Form on Custom Vue должна обрабатываться с использованием директив v-show и / или v-if. Это не подходит для моего варианта использования.

Я посмотрел на forceUpdate API, который применим только для текущего компонента. Не влияет на дочерние компоненты.

Похоже, что обработка forceUpdate для каждого компонента - единственный путь в моем случае использования?

enter image description here

На основе диаграммы видно, что в компоненте 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>

1 Ответ

0 голосов
/ 01 июля 2018

forceUpdate() не будет повторно отображать дочерний интерфейс компонента, но отслеживаемые свойства будут.

В вашем случае. Сначала вам нужно привязать данные к компоненту. Получив ответ ajax, просто позвоните Vue.set, чтобы обновить привязанные данные, и он автоматически обновит дочерние компоненты

...