vue里设置innerHTML的问题

Question

vue里使用innerHTML遇到一个奇怪的问题 我有两个元素 一个content1一个content2 content1里有一个table content2是空元素
然后我在mounted里获取了content1的innerHTML并且设置成content2的innerHTML 按理来说content2里应该有一个跟content1一个的table
但是我发现content2里只有table和tbody 没有tr 不知道为什么

Answer 1

你的table的td是v-for循环出来的吧，如果是列表循环出来的，那就是因为你的列表循环还没有结束，就执行了mounted方法。

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。Vue官网关于vm-nextTick的解释

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改数据
      this.message = 'changed'
      // DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
      })
    }
  }
})