添加特定元素后的动态vue组件

我想基于其他元素的点击在随机位置（实际上不是随机的，基于某种逻辑）添加组件。添加特定元素后的动态vue组件

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

我想达到什么（jQuery的版本）实现这一目标：jsfiddle

如何做，在Vue公司？

N.B：这不能通过v-for来实现，因为所有元素不会按顺序出现或在同一个地方出现。另外，组件不应该在初始化时出现，因为这是动态的。

来源

2017-01-02 Sovon

当你遍历数组/列表来映射你的元素和组件时，你能提供一个父组件的例子吗？（只是为了解你的用例）

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

来源

2017-01-02 14:15:28 sotaan

你可以得到的信息是什么我想在这里实现：http://stackoverflow.com/questions/41415523/how-to-insert-vue-component-in-dynamic-position 无论如何，这不会是一个项目数组。我想在不同的地方显示单个组件（在点击面板的行后面）。 – Sovon

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

来源

2017-01-02 17:43:20 Saurabh

这不是我想要的东西。这是我想要的jquery版本：https：//jsfiddle.net/sovon/zmp10wtq/ – Sovon

添加特定元素后的动态vue组件

回答

相关问题