特定の要素の後に動的な表示コンポーネントを追加します。

Question

他の要素のクリックに基づいてランダムな位置にコンポーネントを追加したい（実際には何らかのロジックに基づいてランダムではありません）。 jQueryので

、我々は$('#someId').append('element')または$('#someId').find('.someClass').after('element')

で私は（jqueryのバージョン）を達成したいどのようなことを達成することができます：jsfiddle

Vueのでそれを行うには？

N.B：すべての要素が連続してまたは同じ場所に表示されないため、これはv-forで実現できませんでした。また、コンポーネントは動的であるため、初期化時に表示しないでください。

Answer 1

要素をコンポーネントにマッピングするために配列/リストをトラバースするときに、親コンポーネントの例を提供できますか？

v-forを使用することもできますが、コンポーネントを表示したい場所でランダムに選択されていない場所で計算されたプロパティによって生成された複数の配列に対しても使用できます。

Answer 2

これは、どのコンポーネントが別のコンポーネントの後に現れるかを整理する場合です。私は配列内のすべてのコンポーネントを持っていると仮定し、配列内のロジックとしてそれらを再配置することができますし、特別な属性：isを使用してそれらのコンポーネントをレンダリングすることができます。

ここでは、試料中の私は、コンポーネントの配列を持っていると私は別の後に、それらのものをレンダリングするためにv-forを使用します。

はフィドルhereを参照してください。

HTML：

<div id="app"> 
    <h1> 
    Following are the components 
    </h1> 
    <div v-for="comp in compArray" :is="comp"></div> 
    <br> 
    <button @click="resuffle"> 
    Resuffle 
    </button> 
</div> 

<template id="comp1"> 
    <div> 
    <span>This is component 1</span> 
    </div> 
</template> 

<template id="comp2"> 
    <div> 
    <span>This is component 2</span> 
    </div> 
</template> 

<template id="comp3"> 
    <div> 
    <span>This is component 3</span> 
    </div> 
</template> 

JS：

Vue.component('comp1', { 
    template: '#comp1', 
}) 

Vue.component('comp2', { 
    template: '#comp2', 
}) 
Vue.component('comp3', { 
    template: '#comp3', 
}) 

new Vue({ 
    el: '#app', 
    data: { 
    compArray: ['comp1', 'comp2', 'comp3'] 
    }, 
    methods: { 
    resuffle: function() { 
     this.compArray.push(this.compArray[1]) 
     this.compArray.splice(1,1) 
    } 
    }, 
})