如何在动态位置插入Vue组件? [英] How to insert Vue component in dynamic position?

问题描述

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

Lots of panels (product) are showing in a page in multiple row and multiple column. I'm using Vue 2 and panels are components. Now, on clicking a panel, I want to show details of that panel below the row of that. This is similar to Google image search.

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

For example, in the above image, if I click any of the s1, s2 or s3, the big panel will appear after s3 (last element of that row). Similarly, for clicking s4 or s5, the big panel appear after s5.

**连续的项目数将根据屏幕大小而变化.

** Number of items in a row will vary based on the screen size.

如何找到该行的最后一个元素，然后在该元素之后插入一个组件?

How to find the last element of the row and insert a component after that element?

推荐答案

如果要排列组件，则一个接一个地出现.让我假设我在数组中拥有所有这些组件，并且可以按照逻辑要求重新排列数组中的那些组件，并且可以使用特殊属性:

If you want to arrange the components: one will appear after another. Let me assume I have all those components in an array and you can re-arrange those in the array as par your logic, and you can use special attribute: is to render those component.

在此示例中，我具有一组组件，并且使用v-for依次渲染这些组件:

Here in sample I have an array of components and I use v-for to render those one after another:

请参见小提琴此处.

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

这篇关于如何在动态位置插入Vue组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！