VueJS - Swap-Komponente bei Klick

Question

In meiner Anwendung habe ich viele Tasten. Wenn ich es drücken würde Ich mag eine Vorlage laden (das auf diese Schaltfläche ersetzen):

Vorlagen:

Vue.component('component-1', {...}); 
Vue.component('component-2', {...}); 

Buttons:

<div id="toReplace"> 
    <button>Button1</button> 
    <button>Button2</button> 
</div> 

In diesem Fall, wenn i Button1 der Inhalt drücken der div toReplace sollte component-1 sein. Sicher, jede Komponente sollte eine "Schließen" -Schaltfläche haben, die wiederum die Tasten (kurz div toReplace) beim Drücken anzeigt.

Answer 1

Sie müssen eine Variable an die Eigenschaft :is binden. Und ändern Sie diese Variable beim Klicken auf die Schaltfläche. Auch müssen Sie es mit einigen v-show Zustand kombinieren. Wie so:

<div id="toReplace"> 
    <div :is="currentComponent"></div> 
    <div v-show="!currentComponent" v-for="component in componentsArray"> 
     <button @click="swapComponent(component)">{{component}}</button> 
    </div> 
</div> 
<button @click="swapComponent(null)">Close</button> 

new Vue({ 
    el: 'body', 
    data: { 
    currentComponent: null, 
    componentsArray: ['foo', 'bar'] 
    }, 
    components: { 
    'foo': { 
     template: '<h1>Foo component</h1>' 
    }, 
    'bar': { 
     template: '<h1>Bar component</h1>' 
    } 
    }, 
    methods: { 
    swapComponent: function(component) 
    { 
     this.currentComponent = component; 
    } 
    } 
}); 

Hier ist schnelles Beispiel:

http://jsbin.com/miwuduliyu/edit?html,js,console,output