Question

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

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

实现这一目标

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

如何在 Vue 中执行此操作？

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

Answer 1

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

Answer 2

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

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

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

2 个答案: