I am constructing an array of Vuetify 'chips' that can have data dragged from one to the other:

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

and it works as expected. But during the document creation I am getting this warning (in the debug console) for every one (of 25) chip creations:

[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"  ... >

I'm sure the correct syntax for draggable is with a string, not a Boolean. Although if I remove the quotes, the warnings still appear - but the code still works. I'm concerned that

• this may be hiding something else wrong in my code
• even if not, those warnings appearing in a browser's debug console don't look good!

Since it may be relevant, the data used to construct the grid looks like this:

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

});

CodePudding user response：

You need to bind draggable first in order to pass boolean:

:draggable="true"