如何将Vue组件插入动态位置？

很多面板（产品）显示在多行和多列的页面中。 我正在使用Vue 2，面板是组件。 现在，在单击面板时，我想在该行的下方显示该面板的详细信息。 这类似于Google图片搜索。

例如，在上图中，如果我单击s1，s2或s3中的任何一个，则大面板将出现在s3（该行的最后一个元素）之后。 同样，对于单击s4或s5，大面板出现在s5之后。

**一行中的项目数将根据屏幕大小而有所不同。

如何找到行的最后一个元素并在该元素后插入一个组件？

Answer 1

这不会直接回答您的问题，但应实现预期的行为。 这是一个jsfiddle

模板：

 
 
 
{{ item.name }} - ${{ item.price }}
 
 
 {{ item.details }} 
 
 
 
  

VUE：

 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

如果要排列组件：一个将显示在另一个之后。 让我假设我在数组中包含了所有这些组件，您可以将这些组件重新排列为逻辑，并且您可以使用特殊属性： is来呈现这些组件。

在示例中，我有一个组件数组，我使用v-for一个接一个地渲染它们：

在这里看小提琴。

HTML：

 
 
 Following are the components 
 
 
  Resuffle  
    

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