问题 1：动态增后 tab, 有相应的 tabpanel。比如当前有两个 tab, 当前视图在 tab1 上，这时我删了 tab2，当前视图不会默认到第一个 tab 上，会是空白。要点击 tab1 才行。没找到 api 操作 tab 标签。

问题 2：动态增加 tab 后，相应的 tabpanel 有 html，我需要操作对应的 tabpanel 中的 html，可以却找不到。不知道怎么监听 tabpanel html 渲染好了的事件。用 watch 也没用。mounted 只能初始化第一个 tab，对于新增的没有用。

<template>
  <div>
    <div class="q-gutter-y-md" style="width: 100%">
     <q-card>
          <q-tabs
            v-model="tab"
            inline-label
            active-color="primary"
            indicator-color="primary"
            align="left"
            narrow-indicator
            no-caps
          >
            <q-tab v-for="tab in tabs" :key="tab.name" v-bind="tab">
              <div v-if="tab.index == '0'">
                <span> </span>
                <q-icon name="add" @click="addTab()"/>
              </div>
              <div v-else>
                <span> </span>
                <q-icon name="remove" @click="removeTab(tab)"/>
              </div>
            </q-tab>
          </q-tabs>
        <q-separator/>
        <q-tab-panels v-model="tab" animated keep-alive>
          <q-tab-panel v-for="tab in tabs" :name="tab.name">
            <q-scroll-area style="height: 569px; width: 100%;background-color: black">
              <div :id="tab.container">
                <output></output>
                <div :id="tab.inputLine" class="input-line">
                  <div class="prompt"></div>
                  <div>
                    <input class="cmdline"/><span class="placeholder"></span>
                  </div>
                </div>
              </div>
            </q-scroll-area>
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
    </div>
  </div>
</template>
<script>
  let index = 0;
  import term from "../js/terminal.js"
  import $ from "../js/jquery.min.js"
  const allTabs = [{
    name: "terminal-" + index,
    label: "Terminal-" + index,
    index: index,
    container: "container" + index,
    "inputLine": "input-line" + index
  }
  ]

  export default {
    data() {
      return {
        tab: 'terminal-0',
        tabs: allTabs.slice(0, 1),
        currentTab: 'terminal-0'
      }
    },
    computed: {
      allTabs() {
        return allTabs.map(tab => ({
          tab,
          selected: this.tabs.indexOf(tab) > -1
        }))
      }
    },
    updated: function () {
      //this.initTab();
    },
    watch: {
      tab: function (value) {
        //this.initTab();
        console.log(value)
      }
    },
    mounted: function () {
      // console.log("123")
      this.initTab();
      //window.initTab = initTab();
      window['updateTabName'] = (index, name) => {
        this.updateTabName(index, name);
      };
    },

    methods: {
      setTabSelected(tab, status) {
        if (status === true) {
          this.tabs.push(tab)
        } else {
          const index = this.tabs.indexOf(tab)
          if (index > -1) {
            this.tabs.splice(index, 1)
          }
        }
      },
      initTab() {
        term.Terminal('#input-line' + index + ' .cmdline', '#container' + index + ' output',
          index);
        $('#input-line' + index + ' .prompt').html('use command "help" to show usage>');

      },
      updateTabName(index, name) {
        for (let i = 0; i < this.tabs.length; i++) {
          if (this.tabs[i].name == "terminal-" + index) {
            this.tabs[i].label = name;
            break;
          }
        }

      },
      addTab() {
        index++;
        this.tabs.push({
          name: 'terminal-' + index,
          label: 'Terminal-' + index,
          index: index,
          container: "container" + index,
          "inputLine": "input-line" + index
        });
      },
      removeTab(tab) {
        const index = this.tabs.indexOf(tab)
        if (index > -1) {
          this.tabs.splice(index, 1)
        }
      }

    }
  }

</script>