引导 Vue 和 Axios

Posted 2023-02-22

【中文标题】引导 Vue 和 Axios

【英文标题】：Bootstrap Vue and Axios

【发布时间】：2021-07-01 13:46:59

【问题描述】：

试图从这个 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' );

【参考方案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();
          )
        
      );