如何在动态位置插入Vue组件？答案

【问题标题】：How to insert Vue component in dynamic position?如何在动态位置插入Vue组件？
【发布时间】：2017-05-15 21:26:15
【问题描述】：

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

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

** 一行中的项目数会因屏幕大小而异。

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

【问题讨论】：

每行总是三个项目吗？
不，会因屏幕尺寸而异。

标签： jquery vue.js vuejs2

【解决方案1】：

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

模板：

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

文字：

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

【讨论】：

感谢您的回答，但这并不能解决我的问题。这是我需要的 jquery 版本：jsfiddle.net/sovon/zmp10wtq
@Sovon 这似乎足够接近。您应该将其链接到您提出的新问题中，并描述您还想要什么。

【解决方案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)
    }
  },
})

【讨论】：

有没有一种美丽的方式来实现 tihs？