Повторно визуализировать компонент Vue.js

Question

Есть ли способ повторно визуализировать компонент Vue.js? У меня есть раскрывающийся список и форма. Оба из них являются отдельными компонентами, один находится в заголовке, а другой - где-то посередине страницы.

Оба являются отдельными компонентами, и я не могу сделать один ребенок компонент другого.

Так можно вызвать повтор рендера выпадающего списка в Vuejs?

Answer 1

Если мы предположим, что список проектов компоненту списка отправляется компоненту через опору, довольно просто обновить список основных приложений, который в руке обновит компонент списка.

Быстрый пример того, как это будет работать:

<div id="app"> <!-- The app --> 
    <list :projects="projectsList"></list> <!-- list component --> 
    <add-project></add-project> <!-- project add component --> 
</div> 

<template id='project-list-template'> <!-- template to list projects --> 
    <div v-for="proj in projects">{{proj}}</div> 
</template> 
<template id="add-project-template"> <!-- template to add project --> 
    <input v-model='projectData.name'/><button v-on:click="saveProject()">Save</button> 
</template> 

<script> 

    // Init components 
    var ProjectListComponent = Vue.extend({ 
     props: ['projects'], 
     template: '#project-list-template' 
    }); 
    var AddProjectComponent = Vue.extend({ 
     template: '#add-project-template', 
     data: function() { 
      return { 
       projectData: { 
        name:'test' 
       } 
      } 
     }, 
     methods: { 
      saveProject:function() { 
       this.$root.appendProjectToList(this.projectData); // Target the app's function 
      } 
     } 
    }); 

    // Register components 
    Vue.component('list', ProjectListComponent); 
    Vue.component('add-project', AddProjectComponent); 

    // Do app stuff 
    new Vue({ 
     el: '#app', 
     data: { 
      projectsList: ['ProjectX','ProjectY'] 
     }, 
     methods: { 
      appendProjectToList: function(project) { 
       this.projectsList.push(project.name); 
      } 
     } 
    }); 
</script> 

Если это не так, то вы должны ДЕЙСТВИТЕЛЬНО добавить упрощенный пример кода.