为什么 Vue / Vuetify / Vite 发出这个奇怪的警告？答案

【问题标题】：Why this odd warning from Vue / Vuetify / Vite?为什么 Vue / Vuetify / Vite 发出这个奇怪的警告？
【发布时间】：2023-02-05 18:11:42
【问题描述】：

我正在构建一组 Vuetify“芯片”，可以将数据从一个拖到另一个：

<v-container id="endgrid" style="max-width: 300px; position: relative;">
  <v-row v-for="(row,r) in endGrid">
      <v-chip  size="x-large"  
       v-for="(chip,c) in row"
        :key="chip.name" 
        draggable="true"
        @drop="drop($event)"
        @dragover="allowDrop($event)"
        @dragstart="drag($event)"
        :id=idString(1,r,c)
        > {{ chip.name }}  </v-chip>
  </v-row>
</v-container>

它按预期工作。但是在文档创建过程中，我收到了每个（共 25 个）chip 创作的警告（在调试控制台中）：

[Vue warn]: Invalid prop: type check failed for prop "draggable". Expected Boolean, got String with value "true". 
   at <VChip size="x-large" key=43 draggable="true"  ... >

我确定 draggable 的正确语法是字符串，而不是布尔值。虽然如果我删除引号，警告仍然出现 - 但代码仍然有效。我担心的是

这可能在我的代码中隐藏了其他错误
即使不是，那些出现在浏览器调试控制台中的警告看起来也不太好！

由于可能相关，用于构建网格的数据如下所示：

onBeforeMount(() => {
  var index = 1;
  for (var i = 0; i < 5; i++)
  {
    endGrid[i] = [];
    for (var j = 0; j < 5; j++)
    {
        endGrid[i][j] = {
            "name" : i*10+j,
            "id" : index,
            "row" : i,  
            "col" : j,
            "list": 'end'
        };
        ++index;
    }
  }

});

【问题讨论】：

标签： vue.js vuejs3 vuetify.js vite

【解决方案1】：

您需要先绑定 draggable 才能传递布尔值：

:draggable="true"

【讨论】：

这可能会奏效。此外，draggable 也可能有用，没有其他任何东西。