Vue2 to 3 migration, infinite width updates #56
Comments
|
Hi Vincent. |
|
Hi @gwinnem, thanks for you quick response. I hope this value is what you are looking for: [ |
|
Hi Vincent export type TLayoutItem = ILayoutItemRequired & { export type TLayout = ILayoutItem[]; |
|
So if I understand you, the layout changed since the fork and I need to make sure that my layout complies to the TLayoutItem type? |
|
True. |
|
I'm sorry but I don't see what doesn't match the type you describe. I have all the properties from ILayoutItemRequired and all the other properties you mention are optional. I'm not using typescript so I can't import your types. Created default layout: To be certain, I added all the optional values as well, but to no avail. |
|
The following are wrong props:
|
|
Thanks for you quick response. These are just properties we use internally, removing them from the data doesn't change the issue we face. [ Error: |
|
I have replaced my testdata with the testdata from the sandbox and the error is still happening. |
|
I'll investigate it further tomorrow |
|
Hi @gwinnem I tried to reduce my code to as little as possible using the testdata from the sandbox and I still get the same errors. Below is the component that barely does anything at all now, I hope this can help identify the problem. <template>
<div class="overview-container">
<div class="container-fluid includes-grid">
<grid-layout
v-model:layout="layout"
>
<grid-item
v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.collapsed ? 2 : item.h"
:i="item.i"
:key="item.i"
>
<p>Component</p>
</grid-item>
</grid-layout>
</div>
</div>
</template>
<script setup>
import { ref} from 'vue';
import {GridLayout, GridItem} from "vue-ts-responsive-grid-layout";
const testData = [
{
i: 1,
h: 2,
w: 1,
x: 0,
y: 0,
isDraggable: false,
isResizable: false,
},
{
i: 2,
h: 1,
w: 2,
x: 1,
y: 0
},
{
i: 3,
h: 2,
w: 1,
x: 2,
y: 1
},
{
i: 4,
h: 2,
w: 1,
x: 3,
y: 1,
isStatic: true
},
{
i: 5,
h: 2,
w: 1,
x: 4,
y: 0
},
{
i: 6,
h: 1,
w: 1,
x: 5,
y: 0,
isStatic: true
},
{
i: 7,
h: 3,
w: 1,
x: 0,
y: 2,
isDraggable: false,
isResizable: false,
},
{
i: 8,
h: 1,
w: 1,
x: 1,
y: 1,
isStatic: true
},];
const layout = ref([...testData]);
</script>
<style scoped lang="scss">
</style>
|
|
This might be solved with the 1.2.8. |
|
I have to test that release before I push it to npm. |
|
Hi @gwinnem I just tried the new version (1.2.8) but the issue persists. |
|
@gwinnem I've found that this is related to vue compat, without vue compat this issue doesn't occur. |
|
@vincent-nagy Tnxs Vincent |
Expected Behavior
Grid shows up at right width for grid items.
Current Behavior
Grid shows up very small, 3 errors, all 3 exactly the same.
Failure Information (for bugs)
I tried to trace the issue and it seems to be that the width is constantly updating and can't determine a real width. The event layout-ready never happens. If I resize the window, it shows as it should but I get another error, see error 2.
Steps to Reproduce
Please provide detailed steps for reproducing the issue.
Context
Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
Latest version of vue, vuecompat and this library.
Failure Logs
Error 1 at load:
Uncaught (in promise) Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
Error 2 at resize:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions')
at shouldUpdateComponent (vue.runtime.esm-bundler.js:3046:27)
at updateComponent (vue.runtime.esm-bundler.js:9061:9)
at processComponent (vue.runtime.esm-bundler.js:9008:7)
at patch (vue.runtime.esm-bundler.js:8465:11)
at patchBlockChildren (vue.runtime.esm-bundler.js:8855:7)
at patchElement (vue.runtime.esm-bundler.js:8747:7)
at processElement (vue.runtime.esm-bundler.js:8596:7)
at patch (vue.runtime.esm-bundler.js:8453:11)
at patchBlockChildren (vue.runtime.esm-bundler.js:8855:7)
at patchElement (vue.runtime.esm-bundler.js:8747:7)
shouldUpdateComponent @ vue.runtime.esm-bundler.js:3046
updateComponent @ vue.runtime.esm-bundler.js:9061
processComponent @ vue.runtime.esm-bundler.js:9008
patch @ vue.runtime.esm-bundler.js:8465
patchBlockChildren @ vue.runtime.esm-bundler.js:8855
patchElement @ vue.runtime.esm-bundler.js:8747
processElement @ vue.runtime.esm-bundler.js:8596
patch @ vue.runtime.esm-bundler.js:8453
patchBlockChildren @ vue.runtime.esm-bundler.js:8855
patchElement @ vue.runtime.esm-bundler.js:8747
processElement @ vue.runtime.esm-bundler.js:8596
patch @ vue.runtime.esm-bundler.js:8453
componentUpdateFn @ vue.runtime.esm-bundler.js:9240
run @ vue.runtime.esm-bundler.js:450
instance.update @ vue.runtime.esm-bundler.js:9290
callWithErrorHandling @ vue.runtime.esm-bundler.js:1671
flushJobs @ vue.runtime.esm-bundler.js:1879
Promise.then (async)
nextTick @ vue.runtime.esm-bundler.js:1755
Z @ vue-ts-responsive-grid-layout.es.js:4818
N @ vue-ts-responsive-grid-layout.es.js:4823
(anonymous) @ vue-ts-responsive-grid-layout.es.js:3923
emit @ vue-ts-responsive-grid-layout.es.js:3922
J @ vue-ts-responsive-grid-layout.es.js:4872
The text was updated successfully, but these errors were encountered: