vue3引入dataV 在main.js/ts引入后报VueCompilerError: <template v-for> key should be placed on the <template>

首先,报错文件为decoration6 和decoration3

 

报错的原因是:

需要为模板中的一级元素添加 key 属性。模板的一级元素为 div.dv-decoration-3,因此需要为这个 div 元素添加 key 属性,而不是为循环中的 rect 元素添加。

解决办法

我找了解决办法 1、可以通过添加 ref(如代码中的 :ref="ref")来实现为 div 元素添加 key 属性。ref 属性会在组件中创建一个唯一的标识符,可以用来引用组件实例。你可以将该标识符作为 key 属性的值,以保证每个循环中 div 元素都有一个唯一的 key。(并没有用)

2 把template标签变为div,将v-for 和 key 放入div中,两个文件都要改,改完你会发现运行还报错;把项目关掉重新打开,记住是重新打开这个项目文件运行,而不是重新运行。

改之后可以运行的代码如下:(两个文件都要改!)

<template>
  <div class="dv-decoration-6" :ref="ref">
    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
      <div
        v-for="(point, i) in points"
        :key="i"
      >
        <rect
          :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
          :x="point[0] - halfRectWidth"
          :y="point[1] - heights[i] / 2"
          :width="rectWidth"
          :height="heights[i]"
        >
          <animate
            attributeName="y"
            :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
            :dur="`${randoms[i]}s`"
            keyTimes="0;0.5;1"
            calcMode="spline"
            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
            begin="0s"
            repeatCount="indefinite"
          />
          <animate
            attributeName="height"
            :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
            :dur="`${randoms[i]}s`"
            keyTimes="0;0.5;1"
            calcMode="spline"
            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
            begin="0s"
            repeatCount="indefinite"
          />
        </rect>
      </div>
    </svg>
  </div>
</template>

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值