[Vuejs]-Selectize.js only manipulates dom of one tab when used with vue's v-for

0👍

You should use ref attribute instead of id.

<div 
  v-for='tab in tabs' 
  v-show='currentTab === tab' 
  :key='tab'>
  <input ref='input'>
</div>
mounted () {
  this.$refs.input.forEach(input => {
    $(input).selectize({
      delimiter: ',',
      persist: false, 
      create (input) {
        return { value: input, text: input }
      }
    })
  })
}

With v-show the other tabs just hidden by none display so you don’t need to reinitialize selectize again when change tab. But if you have some reason to use v-if you have to add watcher to reinitialize when tab changed:

watch: {
  currentTab () {
    Vue.nextTick(() => { // Defer operation to next render to make sure DOM element is finished render
      this.initSelectize()
    })
  }
}

Live Example

Leave a comment