Open longzhenren opened 1 month ago
版本: 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>
感觉可能是因为用vue-drag-resize包裹了整个v-for内容,可以尝试嵌套一层div,将vue-drag-resize移至v-for的内容之内 比如说这样子:
<div v-for=""> <vue-drag-resize> <LineChart/> </vue-drag-resize> </div>
版本: macOS 14.5 vite v2.9.18 yarn v1.22.22 node v20.15.1 yarn dev报错,页面无法显示