Skip to content

在vite下用安装后,会出现[plugin:vite:vue] <template v-for> key should be placed on the <template> tag.错误。 #45

@dzyuan

Description

@dzyuan

错误提示如下:
[plugin:vite:vue] key should be placed on the tag.
D:/GitHub/map/node_modules/@jiaminghi/data-view/lib/components/decoration6/src/main.vue:8:11
6 | >
7 | <rect
8 | :key="i"
| ^
9 | :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
10 | :x="point[0] - halfRectWidth"
at createCompilerError (D:\GitHub\map\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:19:19)
at D:\GitHub\map\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:3851:45
at Array.some ()
at D:\GitHub\map\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:3847:31
at Array. (D:\GitHub\map\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:3978:13)
at traverseNode (D:\GitHub\map\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:2222:19)
at traverseChildren (D:\GitHub\map\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:2164:9)
at traverseNode (D:\GitHub\map\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:2215:13)
at traverseChildren (D:\GitHub\map\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:2164:9)
at traverseNode (D:\GitHub\map\node_modules@vue\compiler-core\dist\compiler-core.cjs.js:2215:13
Click outside or fix the code to dismiss.
You can also disable this overlay with hmr: { overlay: false } in vite.config.js.

错误位置源码如下:

<template>
  <div class="dv-decoration-6" :ref="ref">
    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
      <template
        v-for="(point, i) in points"
      >
        <rect
          :key="i"
          :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
          :x="point[0] - halfRectWidth"
          :y="point[1] - heights[i] / 2"
          :width="rectWidth"
          :height="heights[i]"
        >

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions