Блог

У меня есть приложение 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>
 

и ссылки на вкладки файлов :

    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
        }
      }
    }
 

Мне нужно, чтобы первая вкладка была выбрана по умолчанию.
Может кто-нибудь, пожалуйста, скажите мне, как я могу это сделать или предложить мне, как это сделать?

Заранее спасибо и приятного дня 🙂

Измените логику вычисления индекса:

         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:{
    selectedFile:{
       type:Number,
       default:1,
       validator:function(value){return value>0;}
    }
}
 

Вы можете проверить другие типы в документах, чтобы избежать странных ошибок.