Re-render a Vue.js component

Question

Is there a way to re-render a Vue.js component? I have a dropdown list and a form. Both of which are seperate components, one is located at the header and another one one somewhere in the middle of the page.

Both are seperate components and I can't make one a child component of another.

So is it possible to trigger a re render of the dropdown in Vuejs ?

Answer 1

If we assume that the project list to the list component is sent to the component via a prop, it's fairly trivial to update the main app's list, which in hand will update the list component.

Quick example of how it would work:

<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>

If this is not the case, you should REALLY add a simplified code example.