在特定元素后追加动态vue组件

我想基于其他元素的点击添加随机位置的组件（实际上不是随机的，基于某些逻辑）。

在jQuery中，我们可以通过$('#someId').append('element')或$('#someId').find('.someClass').after('element')

我想要实现的目标（jquery版本）： jsfiddle

如何在Vue中做到这一点？

注意： v-for无法实现这一点v-for因为所有元素都不会按顺序出现或出现在同一个地方。 此外，组件不应出现在初始化中，因为这是动态的。

Answer 1

如果这是关于安排哪个组件将出现在另一个组件之后。 让我假设我在数组中包含了所有这些组件，您可以将这些组件重新排列为逻辑，并且您可以使用特殊属性： 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) } }, }) 

Answer 2

当您遍历数组/列表以使用组件映射元素时，是否可以提供父组件的示例？ （只是为了解你的用例）

您可以使用v-for但是在要显示它们的位置由某些计算属性生成的多个数组上（如果您想要显示组件的位置也不是随机选择的）。