vue mint-ui 的右滑删除失效

Question

mint-ui 的右滑删除失效

上面是一个mint-ui的navbar
下面是内容

在第一个内容显示区域.右滑是正常的
但是同样的代码放在第二个显示区域就失灵了.

<mt-navbar v-model="selected">
        <mt-tab-item id="1">全部订单</mt-tab-item>
        <mt-tab-item id="2">待付款</mt-tab-item>
        <mt-tab-item id="3">待取货</mt-tab-item>
</mt-navbar>
      
      <mt-tab-container v-model="selected">
  <mt-tab-container-item id="1">
    <div class="order-wrapper">
      <div class="content" v-for="(item,index) in order" :key="index" @click='pushToDetali'>
        <mt-cell-swipe
            :right="[
                {
                    content: '删除',
                    style: { background: '#ff0000', color: '#fff'},
                    handler: () => deleteSection(index)
                }
            ]">
        </mt-cell-swipe>
      </div>
    </div>
  </mt-tab-container-item>
  <mt-tab-container-item id="2">
    <order-list></order-list>
  </mt-tab-container-item>
  <mt-tab-container-item id="3">
    <order-list></order-list>
  </mt-tab-container-item>
</mt-tab-container>

后面发现和初始化的selected值有关,mt-navbar绑定的selected,如果是1,那么1的就是正常的,2,3就失灵,但是watch了selected, selected值在切换内容区域的时候值是有发生变化的....难道是这个组件没有初始化?

求大佬帮忙指点,感谢

---

我又尝试了将内容区域写成组件,3个内容区域成三个文件.用于显示.....依旧不行,此时我已经把,mint-ui的navbar换成自己手写的,可以排除navbar的问题....

实在不行有木有大佬给一个右滑删除的代码....网上找了很多多多少少都会有点bug..