Error Typeerror: Cannot Read Property 'value' of Undefined

Mistake in v-on handler: "TypeError: Cannot read property 'value' of undefined"

Errors are reported every bit follows:

The to a higher place fault occurred while running the Vue projection considering its container was initialized before it was generated.

First, cheque whether there are the following operations

//The original operation of fetching dom document.getElementById('textarea'); //After correction, the functioning of taking demo in Vue this.$refs.textarea

If the problem hasn't been solved, information technology is that $refs still tin can't get the value, that is, information technology can't get the sub component object in the El dialog dialog box, and all returned objects are undefined. Add together the following on the outside,

this.$nextTick(function () {  });

For case, I can't go the value of this.$refs.textarea in my this. Initialize() method. It's undefined all the time. I'll add together it exterior

this.$nextTick(office () {     this._initialize(); });

If the problem hasn't been solved, you demand to open El dialog first to initialize the popular-up box. Just when El dialog is initialized can you get the sub components in Vue'due south rendering engine.

As follows, what I desire to do is to open a pop-up box. The pop-upward box is a table of the form form. At that place is an element in the tabular array that is used to edit the code online. It supports the highlighting of each code language. The core code is every bit follows

<template>   <div>     <!-- Operation button -->      <el-button @click="handleAdd">Newly added</el-button>      <!-- Dialog content -->       <el-dialog :title="title" :visible.sync="open" width="1000px">       <el-form ref="grade" :model="form" label-width="80px">         <el-form-particular characterization="Script content">           <div class="in-coder-panel">             <textarea ref="textarea"></textarea>             <el-select class="code-mode-select" v-model="manner" @change="changeMode">               <el-selection v-for="mode in modes" :key="mode.value" :characterization="mode.label" :value="mode.value">               </el-selection>             </el-select>           </div>         </el-form-particular>       </el-form>     </el-dialog>    </div> </template>  <script>   // Introduce global instance   import CodeMirror from 'codemirror'   // Core style   import 'codemirror/lib/codemirror.css'   // After the theme is introduced, y'all need to specify the theme in options to take effect   import 'codemirror/theme/idea.css'    // You need to introduce a specific syntax highlighting library to have the respective syntax highlighting effect   // codemirror officially supports dynamic loading of respective syntax highlight library through / addon/style/loadmode.js and / mode/meta.js   // However, vue does non seem to exist able to dynamically load the corresponding JS after instance initialization, so the corresponding JS is introduced in advance here   import 'codemirror/mode/javascript/javascript.js'   import 'codemirror/mode/css/css.js'   import 'codemirror/mode/xml/xml.js'   import 'codemirror/way/shell/shell.js'   import 'codemirror/mode/sql/sql.js'    //Lawmaking completion prompt   import 'codemirror/addon/hint/anyword-hint.js';   import 'codemirror/addon/hint/css-hint.js';   import 'codemirror/addon/hint/html-hint.js';   import 'codemirror/addon/hint/javascript-hint.js';   import 'codemirror/addon/hint/show-hint.css';   import 'codemirror/addon/hint/show-hint.js';   import 'codemirror/addon/hint/sql-hint.js';   import 'codemirror/addon/hint/xml-hint.js';    consign default {     name: "Code",      props: {       // External incoming content for two-way binding       value: String,       // Syntax blazon passed in from outside       language: {         type: Cord,         default: null       }     },      data() {       return {         // What'due south existent inside         lawmaking: '#!/bin/fustigate\n' +         'cd /root/\n' +         'listing=(`ls`)\due north' +         ' \northward' +         'for i in ${list[@]}\n' +         'exercise\n' +         '   if [ -d $i ]\north' +         '   so\northward' +         '       cp -r $i /tmp/\north' +         '   fi\n' +         'done',         // Default syntax blazon         manner: 'shell',         // Editor instance         coder: null,         // Default configuration         options: {           // Indentation format           tabSize: 4,           // Field of study, corresponding subject library JS needs to be introduced in advance           theme: 'idea',           // ready number           lineNumbers: truthful,           line: true,           extraKeys: {"Ctrl": "autocomplete"},         },         // The syntax highlighting type that supports switching. The corresponding JS has been introduced in accelerate         // MIME type is used, simply text / as prefix is written dead when specified subsequently         modes: [{           value: 'css',           label: 'CSS'         }, {           value: 'javascript',           label: 'Javascript'         }, {           value: 'html',           label: 'XML/HTML'         },  {           value: 'x-sh',           label: 'Beat out'         }, {           value: 'x-sql',           label: 'SQL'         }],         // Pop up layer championship         championship: "",         // Show pop-upwardly layer or not         open: fake,     },      methods: {       // Initialization       _initialize() {         // Initialize the editor example, pass in the text field object and default configuration to be instantiated         this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.options)         // Editor assignment         this.coder.setValue(this.value || this.lawmaking)          // Supports two-way binding         this.coder.on('modify', (coder) => {           this.code = coder.getValue()            if (this.$emit) {             this.$emit('input', this.code)           }         })          // Attempt to get syntax type from parent container         if (this.language) {           // Get specific syntax type object           let modeObj = this._getLanguage(this.language)            // Determine whether the syntax passed in by the parent container is supported           if (modeObj) {             this.mode = modeObj.label           }         }       },       // Get the current syntax type       _getLanguage(linguistic communication) {         // Notice the incoming syntax blazon in the listing of supported syntax types         render this.modes.find((manner) => {           // All values ignore example for comparison           let currentLanguage = language.toLowerCase()           permit currentLabel = fashion.label.toLowerCase()           let currentValue = mode.value.toLowerCase()            // Because the existent value may not be standardized, for case, the real value of Coffee is x-java, so it is said that value and label are compared with the incoming syntax at the same fourth dimension           return currentLabel === currentLanguage || currentValue === currentLanguage         })       },       // Change mode       changeMode(val) {         // Alter the syntax configuration of the editor         this.coder.setOption('mode', `text/${val}`)          // Go the modified syntax         permit characterization = this._getLanguage(val).label.toLowerCase()          // Allows the parent container to heed for the current syntax value through the following functions         this.$emit('language-change', label)       },        /** Push button functioning */       handleAdd() {         this.open up = true;         this.title = "New script";         this.$nextTick(role () {           this._initialize();         });       },     }   }; </script>  <style lang="stylus" rel="stylesheet/stylus">   .in-coder-console     flex-grow 1     display flex     position relative      .CodeMirror       flex-grow 1       z-index ane       .CodeMirror-code         line-top 19px      .code-fashion-select       position absolute       z-index 2       right 10px       top 10px       max-width 130px </style>

The final rendering is every bit follows

Error Typeerror: Cannot Read Property 'value' of Undefined

Source: https://programmer.group/cannot-read-property-value-of-undefined.html

Share this post