选择 vuetify 中的所有复选框选择不使用组合 API答案

【问题标题】：select all checkbox inside vuetify select not working with composition API选择 vuetify 中的所有复选框选择不使用组合 API
【发布时间】：2021-10-07 00:39:47
【问题描述】：

我正在尝试在v-select 中添加一个全选复选框。它与 vue js 中的选项 API 配合得很好。但是在使用组合 API 时，还没有找到可行的方法。我的尝试如下。

     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,
      }
    },

我使用https://vuetifyjs.com/en/components/selects/#append-and-prepend-item 按照文档中的说明进行构建。任何人都知道我在组合 API 中哪里错了吗？

（我正在使用带有组合 API 插件的 vue js 2 版本）

【问题讨论】：

你使用什么版本的 vuetify？
^1.11.3 版本。不知道为什么它不能仅使用组合 API。上面的代码有什么问题吗？
Vuetify 不兼容vue 3，官方stackoverflow.com/q/62871984/2073738
fruits 和 selectedFruits 应该使用 ref()。 Vuetify 不支持 vue3。他们目前有 vue3 的 alpha 版本。
我正在使用带有组合 API 插件的 vue js 2 版本。

标签： vue.js vuetify.js vuejs3

【解决方案1】：

以下方式有效。

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,
  }
},

谢谢大家！！！

【讨论】：