如何动态插入Vue组件？

许多面板（产品）以多行和多列的形式显示在一个页面中。我使用的是 Vue 2，面板是组件。现在，单击一个面板时，我想在该面板的行下方显示该面板的详细信息。这与谷歌图像搜索类似。

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

** 一行中的项目数将根据屏幕尺寸而变化。

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

这不会直接回答您的问题，但应该实现预期的行为。这里有一个jsfiddle https://jsfiddle.net/49gptnad/85/

模板：

<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>

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