Vueコンポーネントを動的な位置に挿入するにはどうすればよいですか？

Question

多くのパネル（製品）が複数の行と複数の列のページに表示されています。私はVue 2を使用しており、パネルはコンポーネントです。さて、パネルをクリックすると、その行の下にそのパネルの詳細が表示されます。これはGoogle画像検索に似ています。

例えば、上記画像において、IはS1、S2またはS3のいずれかをクリックすると、大きなパネルは、S3の後（その行の最後の要素）が表示されます。同様に、s4またはs5をクリックすると、s5の後に大きなパネルが表示されます。

**行内の項目数は、画面サイズによって異なります。

行の最後の要素を見つけてその要素の後にコンポーネントを挿入するにはどうすればよいですか？

Answer 1

これはあなたの質問に直接答えませんが、予想される動作を実装する必要があります。

<div id="vue-instance"> 
    <ul class="item-list"> 
    <li class="item" v-for="item in inventory" @click="dispalyDetails(item)"> 
     <div class="header">{{ item.name }} - ${{ item.price }}</div> 
     <div v-if="item.displayed" class="details"> 
     <div class="details__inner"> 
      {{ item.details }} 
     </div> 
     </div> 
    </li> 
    </ul> 
</div> 

ヴュ：

var vm = new Vue({ 
    el: '#vue-instance', 
    data: { 
    inventory: [ 
     {name: 'MacBook Air', price: 1000, details: 'Lorem ipsum', displayed: false}, 
     {name: 'MacBook Pro', price: 1800, details: 'Lorem ipsum', displayed: false}, 
     {name: 'Lenovo W530', price: 1400, details: 'Lorem ipsum', displayed: false}, 
     {name: 'Acer Aspire One', price: 300, details: 'Lorem ipsum', displayed: false}, 
     {name: 'Aspire One', price: 700, details: 'Lorem ipsum', displayed: false} 
    ] 
    }, 
    methods: { 
    deselectItems() { 
     this.inventory.forEach((item) => { 
     item.displayed = false; 
     }); 
    }, 
    dispalyDetails(item) { 
     if (!item.displayed) { 
     this.deselectItems(); 
     } 

     item.displayed = !item.displayed; 
    } 
    } 
}); 

SCSS：

.item-list { 
    position: relative; 
    display: flex; 
    flex-wrap: wrap; 
    width: 80%; 
    margin: 0 auto; 
} 

.item { 
    width: 33.33%; // adjust accordingly in mq 
    box-sizing: border-box; 
} 

.header { 
    box-sizing: border-box; 
    padding: 10px; 
} 

.details { 
    border: 1px solid red; 
    min-height: 200px; 
} 

.details__inner { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    min-height: 200px; 
    border: 1px solid green; 
} 

Answer 2

あなたが部品を手配したい場合は、次のいずれかが別の後に表示されます。ここjsfiddle

テンプレートです。私は配列内のすべてのコンポーネントを持っていると仮定し、配列内のロジックとしてそれらを再配置することができますし、特別な属性：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) 
    } 
    }, 
})