[Vue warn]: Unhandled error during execution of render function

[longzhenren]

版本： macOS 14.5 vite v2.9.18 yarn v1.22.22 node v20.15.1 yarn dev报错，页面无法显示

<template>
  <div class="dashboard">
    <vue-drag-resize :isActive="true" :w="500" :h="250" :x="0" :y="0">
      <LineChart
        class="chart"
        v-for="(data, index) in props.selectedPanels"
        :key="data.key"
        :title="data.title"
        :xAxisLabel="'时间'"
        :yAxisLabel="'数值'"
        :computedLineData="data.data"
        :currentLineData="data.data"
        :width="'500px'"
        :height="'250px'"
        :displayHistory="showHistory"
      />
    </vue-drag-resize>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import LineChart from './LineChart.vue';
  import type { ChartItem } from './index.vue';
  import VueDragResize from 'vue-drag-resize';

  const props = defineProps({
    selectedPanels: {
      type: Array as () => ChartItem[],
      default: () => [],
    },
    showHistory: {
      type: Boolean,
      default: false,
    },
  });

  // const chartItems = ref<ChartItem[]>(props.selectedPanels);
  watch(
    () => props.selectedPanels,
    newVal => {
      console.log('newVal', newVal);
    },
  );
</script>

<style scoped>
  .dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .chart {
    width: 100%;
    height: 100%;
  }
</style>

[Vue warn]: Unhandled error during execution of render function 
  at <VueDragResize isActive=true w=500 h=250  ... > 
  at <Dashboard selectedPanels= [] showHistory=false > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/monitor-alert/transient-analysis" > 
  at <BaseTransition mode="out-in" appear=true persisted=false  ... > 
  at <Transition name="fade-slide" mode="out-in" appear="" > 
  at <RouterView> 
  at <PageLayout> 
  at <LayoutContent> 
  at <Anonymous hasSider=undefined prefixCls="ant-layout" tagName="section"  ... > 
  at <ALayout class="vben-default-layout-main" > 
  at <Anonymous hasSider=undefined prefixCls="ant-layout" tagName="section"  ... > 
  at <ALayout class="ant-layout ant-layout-has-sider" > 
  at <Anonymous hasSider=undefined prefixCls="ant-layout" tagName="section"  ... > 
  at <ALayout class="vben-default-layout" > 
  at <DefaultLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <AppProvider> 
  at <ALocaleProvider locale= {locale: 'zh-cn', Pagination: {…}, DatePicker: {…}, TimePicker: {…}, Calendar: {…}, …} ANT_MARK__="internalMark" > 
  at <LocaleReceiver children=fn<children> > 
  at <AConfigProvider locale= {locale: 'zh-cn', Pagination: {…}, DatePicker: {…}, TimePicker: {…}, Calendar: {…}, …} > 
  at <App>

[ningshi01]

感觉可能是因为用vue-drag-resize包裹了整个v-for内容，可以尝试嵌套一层div，将vue-drag-resize移至v-for的内容之内 比如说这样子：

<div v-for="">
     <vue-drag-resize>
          <LineChart/>
     </vue-drag-resize>
</div>