What is the purpose of tab and tabRef?

[PavelTurk]

I am just learning vue and trying to use your wonderful library. However, I can't understand one thing.

This is the piece of code I took from examples:

    const tabRef: Ref = ref()
    const tab: Ref = ref('google')
    const tabs: Array<Tab> = reactive<Array<Tab>>...

Why do we need tabRef and tab? According to my logic tabs is the only thing we need. Could you explain?

[viewweiwu]

'tab' is the id of the currently active tab

[PavelTurk]

Thank you for your answer. Do I understand correct, that key is tab id? And tab is current tab key?

[viewweiwu]

These two correspond to each other.

[PavelTurk]

Ok. Thank very much for the explanation.

[PavelTurk]

Maybe it is better to track current tab or its index, but not its key? Because when we watch tab and get new and previous key value we need either iterate array or use map for quick lookup.

[viewweiwu]

I'm sorry, but using index would be a pain to support, and updates are frequent, so support is not provided.

[PavelTurk]

But what about tab object:

now we have

    const tab: Ref = ref()
    watch(tab, (newKey, prevKey) => {

    })

I suggest

    const tab: Ref = ref()
    watch(tab, (oldTab, newTab) => {
       ....  
    })
   var newTab = {
          label: 'New Tab',
          key: 'tab_' + id++,
          favico: () => {
            return '😆'
          }
     };
    tabRef.value.addTab(newTab)
    tab.value = newTab;

For example, in JavaFX we have the following API;

SingleSelectionModel<Tab> selectionModel = tabPane.getSelectionModel();
Tab selectedTab = selectionModel.getSelectedItem();
selectionModel.select(tabX); //select by object
selectionModel.select(1); //select by index starting with 0
selectionModel.clearSelection(); //clear your selection