如何在每个选项卡上打开不同的模式？

Question

我试图在每个选项卡项上打开一个模式，但模式只在第一个选项卡上打开。如果我单击第一个项目以外的任何项目并尝试打开模式，它将在第一个项目上打开。

另一个问题是我在添加新项目时无法打开模式。启动 tabs = [] 不起作用。如何解决？

查看示例

https://jsfiddle.net/gerald3ebd/k7abtf35/

Answer 1

所有三个选项卡都针对相同的模式，通过将 id/href 更改为不同的方式使其 separate/different。

Vue.use(VueTabs);
new Vue({
  el:"#app",
  data:{
    tabs: ['First tab', 'Second tab', 'Third tab']
  },
  methods: {
    removeTab(index){
      this.tabs.splice(index, 1)
    },
    addTab(){
      this.tabs.push('New Tab');
      var vm = this;
      setTimeout(function(){
          var elems = document.querySelectorAll('#modal'+(vm.tabs.length-1));
          M.Modal.init(elems);
      },100);
       
    }
  },
  mounted() {
    document.addEventListener('DOMContentLoaded', function() {
        M.AutoInit()
        var elems = document.querySelectorAll('.modal');
        M.Modal.init(elems);
      })
  }
})

.tab-close{
  float:right;
}
.tab-close:hover{
  transform: rotate(7deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://rawgit.com/cristijora/vue-tabs/master/dist/vue-tabs.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/cristijora/vue-tabs/master/themes/material.css">
<link rel="stylesheet" href="https://rawgit.com/lykmapipo/themify-icons/master/css/themify-icons.css">

<div id="app">
 <button @click="addTab">Add new tab</button>
 <vue-tabs type="pills">
    <v-tab v-for="tab,index in tabs" :key="tab">
       <div slot="title">{{tab}} <span @click.stop="removeTab(index)" class="ti-close tab-close"></span></div>
       {{tab}} 
         <!-- Modal Trigger -->
          <a class="waves-effect waves-light btn modal-trigger" :href="'#modal'+index">Modal_{{index}}</a>

          <!-- Modal Structure -->
          <div :id="'modal'+index" class="modal">
            <div class="modal-content">
              <h4>Modal Header</h4>
              <p>A bunch of text</p>
            </div>
            <div class="modal-footer">
              <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
            </div>
          </div>
    </v-tab>
</vue-tabs>

</div>

如何在每个选项卡上打开不同的模式？

How to open a different modal on each tab?

javascript

tabs

modal-dialog

vue.js

vuejs2