The phenomenon of description

$element(‘id’) = = = $element(‘id’) = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = At the same time, the page DOM has A reference to A member variable (such as A), when the variable A changes, that is, the stack overflow will be reported, the sample code is as follows:

<template> <div id="content"> <input type="button" @click="onTestClick" value=" stack overflow "/> <text>{{stateText}}</text> </div> </template> <script> export default { private: { mContentNode: null, stateText: }, onReady() {/* if $element('id') gets the content, assigns the value to the member variable, */ this.mContentNode = this.$element('content')}, onTestClick() {/* The page DOM has a reference to a member variable, and when that changes, */ this.stateText = 'new state'}} </script>Copy the code

This is because assigning to A VM attribute triggers massive data-driven changes that cause an internal exception loop that causes a stack overflow to report an error.

The solution

$element(‘id’) doesn’t get its contents and assign it to a member variable. You can assign it to a local variable, or to a page global variable, as shown in the following example:

<script> let $gContentNode = null export default { private: { stateText: }, onReady() {/* If $element('id') gets the content, assigns it to a local variable, or to a global page variable, */ const cContentNode = this.element ('content') $gContentNode = this.element ('content') $gContentNode = this.element ('content')} onTestClick() { this.stateText = 'new state' } } </script>Copy the code

The original link: developer.huawei.com/consumer/cn…

By Mayism