我正在构建一个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;
}
}
});
1条答案
按热度按时间xpcnnkqh1#
您需要首先绑定
draggable
,以便传递布尔值: