vue中通过ref获取到元素了，用什么来改变内容啊？

Question

报错就是图上所示，告诉我innerHTML是undefined。这是什么情况啊？

Answer 1

不是innerHTML是undefined，而是this.$refs.noticeContentLater是undefined。你并没有获取到元素。

------------------------------更新答案----------------------------
获取子元素变量的方法由很多种，你使用this.$refs并没有错, 但是子组件要及时更新对应变量。例如：

子组件

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

同样也可以使用监听事件的方法, 例如在子组件update种触发父组件监听的事件，更新变量，这样就需要this.$refs了。如：

父组件

<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>

子组件

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

当然，不管如何，感觉Vue并没有直接操作Dom元素的必要，想要更新元素的属性，提前绑定好就可以了。

Answer 2

Vue获取dom时，最好在mounted里用$nextTick,在页面渲染后dom更新时。