引导 Vue 和 Axios

Question

试图从这个 Axios 调用中获取 HTML 以在 b-tab 中呈现。没有运气。它在任何地方都有效，但在那里。对 Vue 来说还是很新的，对于我在这里缺少的东西有点难过。我觉得 compile 在这里可能有用，但也可能会过冲。

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();
          })
        }
      });