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>
視圖：
methods: {
doSomething() {
document.querySelector('.custom).innerHTML = /new items
}
}
我的問題是，這是更改外部 div 的唯一方法嗎？我需要改變items，新的來自 api。也許還有另一種方式？如果只是通過innerHTML，那么我該如何實作這個想法？
uj5u.com熱心網友回復：
例如，
<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
}
}
編輯
<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.
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/377027.html