vue多组件怎么做排序？

Question

问题描述

我有很多个组件需要引用，这些组件的结构都不一致，但是需要在他们上面加一个上移下移。
并且一个组件可能会有多个，所以需要用到v-for。通过改变data来渲染更新视图，但是由于模板中已经把地方组件写死在那了，就算数据改变了，视图的位置也不会更新。

相关代码

模板：

<Initial v-for="(item,key) in currency" :key="item.id" v-if="item =='initial'" :index="key"></Initial>
<Basic v-for="(item,key) in currency" :key="item.id" v-if="item =='basic'" :index="key" @orderTake="orderTake" @deleteTake="deleteTake"></Basic>
<Introduce v-for="(item,key) in currency" :key="item.id" v-if="item =='introduce'" :index="key" @orderTake="orderTake" @deleteTake="deleteTake"></Introduce>
<Education v-for="(item,key) in currency" :key="item.id" v-if="item =='education'" :index="key" @orderTake="orderTake" @deleteTake="deleteTake"></Education>
<Work v-for="(item,key) in currency" :key="item.id" v-if="item =='work'" :index="key" @orderTake="orderTake" @deleteTake="deleteTake"></Work>
<Skill v-for="(item,key) in currency" :key="item.id" v-if="item =='skill'" :index="key" @orderTake="orderTake" @deleteTake="deleteTake"></Skill>

处理：

data() {
    return {
        currency : ['initial','basic','introduce','education','work','skill']
      }
    },
methods:{
    orderTake(order,index){
      if(order == 'asc'){
        if(index > 1){
          let str1 = this.currency[index], str2 = this.currency[index-1];
          this.currency[index] = str2;
          this.currency[index-1] = str1;
          console.log(this.currency)
        }
      }else if(order == 'desc'){
        if(index < this.currency.length-1){
          let str1 = this.currency[index], str2 = this.currency[index+1];
          this.currency[index] = str2;
          this.currency[index+1] = str1;
          console.log(this.currency)
        }
      }
    }

你期待的结果是什么？实际看到的错误信息又是什么？

让这些组件根据我data数据来进行排序，而不是模板写死的位置。

有没有大佬解答一下，困扰了半天

Answer 1

<component v-for="(item,key) in currency" :is="item" :key="item.id" :index="key" @orderTake="orderTake" @deleteTake="deleteTake"></component>

改成了这样解决了，is渲染模板，只是中途需要注意一点，数组的更新视图问题。之前都没在意。如果只是通过
array[0] = 1;这样不会更新视图，需要用到$set

Answer 2

在模板写死就不能切换位置了，你这种需求想通过代码解决也许只有写 render 了。
不过还有一种比较简单的方法，可以通过css来控制组件显示位置 可以了解下CSS order 属性规定了弹性容器中的可伸缩项目在布局时的顺序