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?
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.
}
}