在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue中通過ref獲取到元素了,用什么來改變內(nèi)容???

vue中通過ref獲取到元素了,用什么來改變內(nèi)容???

圖片描述

圖片描述

報(bào)錯(cuò)就是圖上所示,告訴我innerHTML是undefined。這是什么情況?。?/p>

回答
編輯回答
萌面人

Vue獲取dom時(shí),最好在mounted里用$nextTick,在頁面渲染后dom更新時(shí)。

2017年2月6日 22:43
編輯回答
小曖昧

不是innerHTMLundefined,而是this.$refs.noticeContentLaterundefined。你并沒有獲取到元素。

------------------------------更新答案----------------------------
獲取子元素變量的方法由很多種,你使用this.$refs并沒有錯(cuò), 但是子組件要及時(shí)更新對(duì)應(yīng)變量。例如:

子組件

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

同樣也可以使用監(jiān)聽事件的方法, 例如在子組件update種觸發(fā)父組件監(jiān)聽的事件,更新變量,這樣就需要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>

當(dāng)然,不管如何,感覺Vue并沒有直接操作Dom元素的必要,想要更新元素的屬性,提前綁定好就可以了。

2017年9月6日 21:46