[Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded" #9081
Description
Version
2.5.17
Reproduction link
https://jsfiddle.net/chrisvfritz/50wL7mdz/
Steps to reproduce
The error is at that function of vue.
/**
* Helper that recursively merges two data objects together.
*/
function mergeData (to, from) {
if (!from) { return to }
var key, toVal, fromVal;
var keys = Object.keys(from);
for (var i = 0; i < keys.length; i ) {
key = keys[i];
toVal = to[key];
fromVal = from[key];
if (!hasOwn(to, key)) {
set(to, key, fromVal);
} else if (isPlainObject(toVal) && isPlainObject(fromVal)) {
mergeData(toVal, fromVal);
}
}
What is expected?
It is kinda weird and I don't know from where it comes from or why is happening. So I can't provide a link on how to reproduce it.
What is actually happening?
Many times the app is working perfectly but few times, this error appears. And the app is broken.
Sorry for not providing a Link to minimal reproduction but I don't even know from where this error comes from since it is not happening every time.
For more info the error is showing by using those components:
<template>
<div class="tasks-content">
<v-tabs class="tabs" grow hide-slider height="60px" v-model="active_tab">
<v-tab
centered
v-for="tab in tabs"
:key="tab.name"
:href="`#${tab.name}`"
v-model="active_tab"
>
{{ tab.name }}
</v-tab>
</v-tabs>
<v-tabs-items v-model="active_tab">
<v-tab-item v-for="tab of tabs" :key="tab.id" :value="tab.name">
<v-card flat>
<!--<component :tasks="tasks" :is="active_tab"></component>-->
</v-card>
</v-tab-item>
</v-tabs-items>
</div>
</template>
<script>
import MyTasks from './MyTasks.vue'
import AllTasks from './AllTasks.vue'
export default {
name: 'TasksContent',
components: {
MyTasks, AllTasks
},
props: {
tasks: Array
},
data: () => ({
active_tab: 'MyTasks',
tabs: [
{ id: 1, name: 'MyTasks' },
{ id: 2, name: 'AllTasks' },
]
}),
}
</script>
<style lang="scss" scoped>
.tasks-content {
}
</style>
<template>
<div class="my-tasks">
<div class="chips">
<v-chip small color="orange" text-color="white">
<v-avatar class="teal">14</v-avatar>
All
</v-chip>
<v-chip small color="orange" text-color="white">
<v-avatar class="teal">9</v-avatar>
Completed
</v-chip>
<v-chip small color="orange" text-color="white">
<v-avatar class="teal">3</v-avatar>
Pending
</v-chip>
<v-chip small color="orange" text-color="white">
<v-avatar class="teal">2</v-avatar>
Behind
</v-chip>
</div>
<div class="custom-table">
<div class="header">
<div class="col">Assignee</div>
<div class="col">Project</div>
<div class="col">Status</div>
</div>
<div class="body">
<div class="row" v-for="task in tasks" :key="tasks.id">
<div class="assignee-col">
<v-img :src="require('@/assets/temp/user.png')" height="40" width="40" />
</div>
<div class="project-col">
{{ task.description.length > 25 ? task.description.slice(0, 40) : task.description }}
</div>
<div class="status-col">
{{task.status}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'MyTasks',
props: {
tasks: {
type: Array,
default: () => []
}
}
}
</script>
<style lang="scss" scoped>
.my-tasks {
.chips {
padding: 20px 0;
}
.custom-table {
.header {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
.col {
padding: 10px;
}
}
.body {
.row {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
border-bottom: 1px solid gray;
grid-gap: 5px;
padding: 10px;
}
}
}
}
</style>