添加特定元素後的動態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組件

回答

相關問題