Vue/Vuetify/Vite中draggable属性类型错误警告问题

问题原因 #

Vuetify的<v-chip>组件的draggable是一个Vue Prop，类型要求为布尔值（Boolean），但你当前的写法传递的是字符串值：

• 直接写draggable="true"：Vue会将其解析为字符串"true"，不符合Prop的类型要求
• 写draggable=true（不带引号）：在HTML模板中，未绑定的属性值默认仍是字符串，同样不满足布尔值类型要求

这就是控制台抛出类型检查警告的核心原因，虽然功能暂时正常，但类型不匹配可能埋下潜在的兼容性或逻辑问题，同时大量警告也会干扰日常调试体验。

解决方案 #

将draggable改为Vue绑定语法，传递布尔值：

修改后的<v-chip>代码片段：

<v-chip  
  size="x-large"  
  v-for="(chip,c) in row"
  :key="chip.name" 
  :draggable="true" <!-- 添加冒号，传递布尔值true -->
  @drop="drop($event)"
  @dragover="allowDrop($event)"
  @dragstart="drag($event)"
  :id="idString(1,r,c)"
> {{ chip.name }} </v-chip>

原理说明 #

在Vue模板中：

• 不带冒号的属性（如draggable="true"）：值会被默认解析为字符串
• 带冒号的属性（如:draggable="true"）：值会被当作JavaScript表达式解析，这里的true就是标准布尔值类型，完全符合<v-chip>组件对draggable Prop的类型要求，修改后警告会立即消失。

内容的提问来源于stack exchange，提问作者quilkin