vue change div from component-CodePudding

html:

<div class='wrapper'>
  <div class='custom'>
    <div class='item'> 1</div>
    <div class='item'> 2 </div>
    <div class='item'> 3 </div>
  </div>
  <component-vue />
</div>

Vue:

methods: {
  doSomething() {
   document.querySelector('.custom).innerHTML = /new items
 }
}

My question is, is this the only way to change the external div? I need to change items, new ones come from api. Maybe there is another way? If only through innerHTML, then how can I implement the idea?

CodePudding user response：

For example,

<div class="item" v-for="(item, index) in items" :key="index"></div>

data() {
   return {
      items: []
   }
},
methods: {
    doSomething() {
       // Fetch data from api and load
       this.items = res.data
   }
}

EDIT

<div class='custom' v-html="dataHtml"></div>

data() {
   return {
      dataHtml: `
      <div>Initial html</div>
      `
   }
},
methods: {
    doSomething() {
       // Fetch data from api and load
       this.dataHtml = createHtml(res.data) // Fictional method to parse data and transform to html f.e.
   }
}