search

viewweiwu / vue-tabs-chrome

chrome tab like.
https://viewweiwu.github.io/vue-tabs-chrome/
231 stars 49 forks source link

error when key has a space #8

Closed liuchao92 closed 4 years ago

liuchao92 commented 4 years ago

the code in Usage contains:

{
  label: 'New Tab',
  key: 'costom key'
}

it will generate a div like <div class="tabs-item tab-costom key">...</div>

and ths will causes [Vue warn]: Error in mounted hook: "TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."

in your source file packages/vue-tabs-chrome.vue, lines 186~187:

let $el = $item.find(el => el.classList.contains(`tab-${getKey(tab, tabKey)}`)) // may be undefined
tab._instance = new Draggabilly($el, { axis: 'x', containment: $content, handle: '.tabs-main' })

please fix this, thx

viewweiwu commented 4 years ago

sorry, the key is required. if you have empty key. you can set random key or date key.

tabs: [
  { key: Date.now, label: 'date key'  },
  { key: Math.random(), label: 'random key' }
]

thx.