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

Posted 2023-02-22

【中文标题】选择 vuetify 中的所有复选框选择不使用组合 API

【英文标题】：select all checkbox inside vuetify select not working with composition 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，官方***.com/q/62871984/2073738

fruits 和 selectedFruits 应该使用 ref()。 Vuetify 不支持 vue3。他们目前有 vue3 的 alpha 版本。

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

【参考方案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,
  
,

谢谢大家！！！