select all checkbox inside vuetify select not working with composition API

Question

I am trying to add a select all checkbox inside v-select. It's working fine with options API in vue js. But when working with composition API, couldn't find a way to workable it yet. My attempt is as below.

     setup() {
       const fruits = ['Apples', 'Apricots', 'Avocado', 'Bananas']
       let selectedFruits = []
       const likesAllFruit = computed(() => {
         return selectedFruits.length === fruits.length
       })
       const likesSomeFruit = computed(() => {
         return selectedFruits.length > 0 && !likesAllFruit.value
       })
       const icon = computed(() => {
         if (likesAllFruit.value) return 'mdi-close-box'
         if (likesSomeFruit.value) return 'mdi-minus-box'
         return 'mdi-checkbox-blank-outline'
       })
       const toggle = async () => {   
         if (likesAllFruit.value) {
           selectedFruits = []
         } else {
           selectedFruits = fruits.slice()
         }
         await nextTick()
       }
       return {
        fruits,
        selectedFruits,
        likesAllFruit,
        likesSomeFruit,
        icon,
        toggle,
      }
    },

I used https://vuetifyjs.com/en/components/selects/#append-and-prepend-item to build this as per in the document. Anyone knows where I was wrong this with in composition API?

(I am using vue js 2 version with composition API plugging)

^1.11.3 version. No idea why it's not working with composition API only. Any issue in above code? — Jack
– Jack, Commented Aug 1, 2021 at 15:19
Vuetify is not compatible with vue 3, officially stackoverflow.com/q/62871984/2073738 — Marcello B.
– Marcello B., Commented Aug 1, 2021 at 16:05
fruits and selectedFruits should be using ref(). Vuetify is not supporting vue3. They currently have an alpha version for vue3. — Fima Taf
– Fima Taf, Commented Aug 1, 2021 at 16:06

Jack · Accepted Answer · 2021-08-01 19:58:06Z

Below way works.

setup() {
  const fruits = ref([
    { text: 'Apples', value: 'Apples' },
    { text: 'Apricots', value: 'Apricots' },
    { text: 'Avocado', value: 'Avocado' },
    { text: 'Bananas', value: 'Bananas' },
  ])
  let selectedFruits = ref([{}])
  const likesAllFruit = computed(() => {
    return selectedFruits.value.length === fruits.value.length
  })
  const likesSomeFruit = computed(() => {
    return selectedFruits.value.length > 0 && !likesAllFruit.value
  })
  const icon = computed(() => {
    if (likesAllFruit.value) return 'mdi-close-box'
    if (likesSomeFruit.value) return 'mdi-minus-box'
    return 'mdi-checkbox-blank-outline'
  })
  const toggle = async () => {
    if (likesAllFruit.value) {
     selectedFruits.value = []
    } else {
     selectedFruits.value = fruits.value.slice()
    }
    await nextTick()
  }
  return {
    fruits,
    selectedFruits,
    likesAllFruit,
    likesSomeFruit,
    icon,
    toggle,
  }
},

Thanks all!!!

Collectives™ on Stack Overflow

select all checkbox inside vuetify select not working with composition API

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related