The element is obtained through ref in vue. What can be used to change the content?

The

error report is shown in the figure. Tell me that innerHTML is undefined. What"s going on?

Vue-cli vue.js
Mar.10,2021

is not innerHTML is undefined , but this.$refs.noticeContentLater is undefined . You didn't get the element.

-Update answer-
there are many ways to get child element variables. There is nothing wrong with using this.$refs, but the subcomponents should update the corresponding variables in a timely manner. For example:

subcomponents 

<template>
  <div id="main">example</div>
</template>
<script>
export default {
  data () {
    return {
      noticeContentLater: null
    }
  },
  update: function () {
    this.noticeContentLater = document.getElementById('main')
  }
}
</script>

you can also use the method of listening for events, such as the event that triggers the parent component listening in the child component update, to update the variable, so you need this.$refs. For example,

parent component 

<template>
  <div id="app">
    <child @updateDom="fUpdate"></child>
  </div>
</template>
<script>
export default {
  data () {
    return {
      myDom: null
    }
  },
  method: {
    fUpdate: function (element) {
      this.myDom = element
    }
  }
}
</script>

subcomponents 

<template>
  <div id="main">example</div>
</template>
<script>
export default {
  update: function () {
    this.$emit('updateDom', document.getElementById('main'))
  }
}
</script>

of course, in any case, it doesn't feel necessary for Vue to directly manipulate the Dom element, so if you want to update the attributes of the element, you can bind it in advance.

When

Vue gets dom, it's best to use $nextTick, in mounted when the dom is updated after the page is rendered.

Previous: On VS2015, no DDX_Text invocation statement is generated after using the CPPMFC dialog box to edit and define the variable

Next: Mini Program, two templates in a page are reused twice, how to pass different values to this template?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu