vue 从组件更改 div

Question

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

我的问题是，这是更改外部 div 的唯一方法吗？我需要更改 items，新的来自 api。也许还有另一种方法？如果只是通过innerHTML，那我该如何实现这个想法？

Answer 1

例如，

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

vue 从组件更改 div

vue change div from component

vue.js

vue-component

vuejs2