vue拿不到dom中的值的问题，求助谢谢各位！

Question

<div id="app">
  <div v-if="showItem" id="content">这是div中的内容</div>
  <button @click="showContent">显示</button>
</div >
  <script>
    var vm = new Vue({
      el: '#app',
  data: {
      showItem: false
  },
  methods: {
      showContent() {
      this.showItem = true
      var text = document.getElementById('content').innerHTML
      console.log(text);
    }
  }
})

为什么点击显示以后报错，获取不到dom里面的值呢？我的猜测是因为此时id为content的div还没完成渲染？这里面的原理哪位大佬能帮我讲解一下吗？还有怎么才能获取到里面的值？
我后来把取值和打印的代码放到一个setTimeout里面，可以取到值，但是这个写法感觉不优雅TT

谢谢各位了！

Answer 1

这个问题和 vif 与 vue 的更新视图机制有关，
有两个解决方法，

1. 用 vshow 代替 vif，因为vif false下的 dom 是动态渲染的，初始是不存在的。由于 vue 的更新视图机制是异步的，所以就会导致无法同步获取更新后的 dom。
2. 保持用 vif，使用 vue 提供的 nexttick 方法 在回调里获取操作 dom。

Answer 2

你的showItem是false，自然没有content元素了。我猜你是想用v-show而不是v-if