vue multiselect : remove group label if empty

Question

Such as the print screen, i want to remove intended group label if all childs are selected

In the screenshot, "Liège (Province)" is a part of the group label (Province). If i select it, it disappears from the group but the group label remains displayed.

How can I hide or remove the group label or the LI tag if all the child elements have been tagged?

EDIT: I think we should put a condition "!props.option.length" in the "v-if" like snippet below but it doesn't work.

user_7499069 · Answer

You just need a computed property for the option. It will hold the groups which are not included. Here is a working demo that has a filteredOptions property

var app = new Vue({
  el: '#app',
  components: { Multiselect: window.VueMultiselect.default },
   data () {
    return {
      options: [
        {
          language: 'Javascript',
          libs: [
            { name: 'Vue.js', category: 'Front-end' },
            { name: 'Adonis', category: 'Backend' }
          ]
        },
        {
          language: 'Ruby',
          libs: [
            { name: 'Rails', category: 'Backend' },
            { name: 'Sinatra', category: 'Backend' }
          ]
        },
        {
          language: 'Other',
          libs: [
            { name: 'Laravel', category: 'Backend' },
            { name: 'Phoenix', category: 'Backend' }
          ]
        }
      ],
      value: []
    }
  },
  computed:{
    filteredOptions(){
      return this.options.filter(el => el.libs.some(r=> !this.value.includes(r)))
    }
  }
})

body { font-family: 'Arial' }




  Timeline
  
  
  
  



   
  
  Groups
  Oops! No elements found. Consider changing the search query.
  {{ value  }}

vue multiselect : remove group label if empty

1 Answers