VueJS - クリック時のスワップコンポーネント

Question

私のアプリケーションにはたくさんのボタンがあります。私はButton1コンテンツを押すと、この場合、

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

：

テンプレート：

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

ボタン私はそれを押したとき、私は、テンプレート（つまり、このボタンを置き換える）をロードしたいと思いますのdiv toReplaceはcomponent-1である必要があります。 確かに、各コンポーネントには、ボタンをもう一度表示する「閉じる」ボタンが必要です（略してdiv toReplace）。

Answer 1

変数を:isプロパティにバインドする必要があります。ボタンをクリックするとこの変数が変更されます。また、それをいくつかのv-showの条件と組み合わせる必要があります。これと同じように：ここで

<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; 
    } 
    } 
}); 

は簡単な例です：

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