The problem of setting innerHTML in vue

There is a strange problem with using innerHTML in

vue. I have two elements, a content1 and a content2 content1, and a table content2 is an empty element
, and then I get the innerHTML of content1 in mounted and the innerHTML set to content2 is supposed to have a table
like content1 in content2, but I find that there are only table and tbody in content2 without tr. I don"t know why

.
Mar.05,2021

the td of your table is looped out by v-for . If it is looped out by a list, the mounted method is executed before the end of your list loop.

defers the callback until after the next DOM update loop. Use the data immediately after modifying it, and then wait for the DOM update. It is the same as the global method Vue.nextTick, except that the callback this is automatically bound to the instance that calls it. Vue's official website explanation of vm-nextTick
new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 
      this.message = 'changed'
      // DOM 
      this.$nextTick(function () {
        // DOM 
        // `this` 
        this.doSomethingElse()
      })
    }
  }
})
Menu