默认选择的第一个选项卡

Question

我有一个 vuejs/vuetify 应用程序，它具有使用 v-tabs/v-tab 组件在页面之间导航的标签栏。幸运的是，当单击选项卡时，会获取当前数据，但我需要的是在进入应用程序时，默认情况下应该打开或选择一个选项卡。 这是标签组件：

<v-tabs  v-model="tab">
  <v-tab  v-for="file in selectedFiles" :currentTab="currentTab" :key="file.name"  @drop="onDrop($event, file)" @click="onTabSelect(file)">{{ file.name }}
  </v-tab>
  <v-spacer/>
</v-tabs>

以及 FileTabs 的参考：

   export default {       
      name: 'FileTabs',
      data () {
        return {
          tab: false
        }
      },
      props: {
        selectedFile: null,
        selectedFiles: null
      },
      mounted () {
        this.tab = this.calcFileIndex()
      },
      watch: {
        selectedFile () {
          this.tab = this.calcFileIndex()
        }
      },
      methods: {
        onTabSelect (file) {
          this.$emit('select', file)
        },
        deleteTableRow: function (idx) {
          return this.selectedFiles.splice(idx, 1)
        },
        calcFileIndex () {
          if (this.selectedFile === 1) {
            return this.tab
          }
          const idx = this.selectedFiles.findIndex(({ name }) => name === this.selectedFile.name)
          if (idx < 0) {
            return this.tab
          }
          return idx
        }
      }
    }

我需要默认选择第一个标签。 有人可以告诉我该怎么做或建议我怎么做吗？

提前谢谢你，祝你今天愉快:)

Answer 1

改变指数计算背后的逻辑：

        calcFileIndex () {
          return this.selectedFile === 1    
                         ?    1
                         :    this.selectedFiles.findIndex(({ name }) => name === this.selectedFile.name);
        }

然后在你的观察者中，验证索引：

        selectedFile () {
          let index = this.calcFileIndex()
          if(index>0) 
              this.tab = index;
          else 
              this.tab = 1;
        }

另外，最好设置props，如果是numeric，则把type设为numeric，并验证它是否大于零：

props:{
    selectedFile:{
       type:Number,
       default:1,
       validator:function(value){return value>0;}
    }
}

您可以在docs查看更多类型，以避免出现奇怪的错误。