vue js dynamiccaly переупорядочить дочерние элементы компонента

Question

У меня есть компонент vue с дочерними элементами, как показано ниже, id, чтобы переупорядочить детей, когда происходит определенное событие, как бы это сделать?

app.vue

<template> 
    <div> 
     <child-one></child-one> 
     <child-two></child-two> 
    </div> 
</template> 
<script> 
    module.exports = { 

     components: { 
     'child-one' : require('./child1.vue'), 
     'child-two' : require('./child2.vue') 

     }, 
    events: { 
     'rearrange': function (d) { 
      // dynamically rearrange 'child-one' and 'child-two' 
      } 
    } 
</script> 

Answer 1

Если вам нужно манипулировать их динамически, это, вероятно, будет проще, если вы создаете их динамически тоже:

JS:

data(){ 
    return { 
     components:[ 
      { 
       type:'child-one' 
      }, 
      { 
       type:'child-two' 
      } 
     ] 
    } 
} 

HTML:

<template> 
    <div> 
     <div v-for="component in components" :is="component.type"></div> 
    </div> 
</template> 

Тогда в вашем случае вы можете просто манипулировать components массив, однако вам нужно