What can I do if a stack overflow occurs in a quick app?

When content obtained through $element('id') is assigned to a member variable, a stack overflow (RangeError: Maximum call stack size exceeded) may occur and the program will crash. If member variable references exist for a DOM, and a member variable changes, a stack overflow will also occur. The sample code is as follows:

	<template>
	<div id="content">
	<input type="button" class="button" @click="onTestClick" value="Stack overflow occurs."/>
	<text>{{ stateText }}</text>
	</div>
	</template>
	<script>
	export default {
	private: {
	mContentNode: null,
	stateText: 'init state'
	},
	onReady() {
	/* When data obtained by $element('id') is assigned to a member variable, a stack overflow may occur. */
	this.mContentNode = this.$element('content')
	},
	onTestClick() {
	/* To reproduce this problem, change a member variable when member variable references exist for a DOM. */
	this.stateText = 'new state'
	}
	}
	</script>

view raw stackoverflow.ux hosted with ❤ by GitHub

The reason is that value assignment will lead to massive data changes. As a result, an internal abnormal loop occurs, causing a stack overflow.

Solution

To prevent a stack overflow, you can assign data obtained through $element('id') to a local or global variable rather than a member variable. The sample code is as follows:

	<script>
	let $gContentNode = null
	export default {
	private: {
	stateText: 'init state'
	},
	onReady() {
	/* You can assign the data obtained through $element('id') to a local or global variable to prevent the stack overflow. */
	const cContentNode = this.$element('content')
	$gContentNode = this.$element('content')
	},
	onTestClick() {
	this.stateText = 'new state'
	}
	}
	</script>

view raw stackoverflow-fix.ux hosted with ❤ by GitHub