引导Vue和Axios

Question

尝试从这个Axios调用中获取超文本标记语言，以在b选项卡中呈现。运气不好。除了那里，它在任何地方都有效。对Vue来说还是很新鲜的，有点困惑我在这里错过了什么。我觉得编译在这里可能很有用，但也可能是过度的。

HTML：

<div id="tabby">
 
    <b-tabs>
      <b-tab title="Atari 2600" active>
        

 <div id="app">  
                <div v-html="results"></div>
            </div>

        <b-spinner id="loader1" style="display: block; margin-left:auto; margin-right:auto; margin-top:200px;">
    
        

      </b-tab>

       <b-tab title="3DS">
        
         <div id="app2">  
                <div v-html="results"></div>
            </div>

        <b-spinner id="loader2" style="display: block; margin-left:auto; margin-right:auto; margin-top:200px;">
    
        

      </b-tab>


    </b-tabs>

</div>

Vue：

const url = "someurl";

const vm = new Vue({
        el: '#app',
        data: {
            
          results: ''
        
        },
        mounted() {
          axios.get(url, {params: { section: 'atari2600'}}).then(response => {
            this.results = response.data
            console.log(response);
            $('#loader1').hide();
          })
        }
      });


const vm2 = new Vue({
        el: '#app2',
        data: {
            
          results: ''
        
        },
        mounted() {
          axios.get(url, {params: { section: '3ds'}}).then(response => {
            this.results = response.data
            console.log(response);
            $('#loader2').hide();
          })
        }
      });

 const vms = new Vue({ el: '#tabby' });

Answer 1

明白了。我单独渲染标签，这打破了一切。

const vm = new Vue({
        el: '#app',
        data: {
            
          results: ''
        
        },
        el: '#tabby',
        mounted() {
          axios.get(url, {params: { section: 'atari2600'}}).then(response => {
            this.results = response.data
            console.log(response);
            $('#loader1').hide();
          })
        }
      });