问题：ajax请求json数据渲染不进页面

Question

<template>
    <div class="top_s_box_wrap" >
         <div class="back_add">
            <div class="threeImg">
                 <div class="iconleft" @click="zuohua" v-on:mouseover="stopmove()" v-on:mouseout="move()">
                        <img  src="../../static/csj/img/arrow1.png" alt="">
                    </div>
                     <div class="iconright" @click="youhua" v-on:mouseover="stopmove()" v-on:mouseout="move()">
                        <img  src="../../static/csj/img/arrow2.png" alt="">
                    </div>

                <div class="Containt">  
                    <ul id="box" :style="{'left':calleft + 'px'}"  v-on:mouseover="stopmove()" v-on:mouseout="move()">
                        <li v-for="(item,index) in swipers" :key="index">
                           
                            <img :src="item.img"/>
                        </li>
                    </ul> 
                </div>  
            
            </div>
        </div>
   </div>
</template>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

   $.ajax({
             type: "get",
             async: true,
            url:'../../static/swstd/lunbo.txt',
              success:function (data) {
                var a = JSON.parse(data);
              //this.swipers = JSON.parse(data);
              let msg = a.swipers[0].group;
            console.log( msg[0]+"=========------========");
                setTimeout(function(){
                     init();
                    },0)
                }
            }) 
       

export default {   
data() {
        return {
            swipers:[],
            calleft:0,
            name:'',
            img:'',
            url:'',
            title:'',
            info:''

            }
           
} ,
created() {
        this.move()
    },
    methods: {
        //移动
        move() {
            this.timer = setInterval(this.starmove, 2000)
        },
        //开始移动
        starmove() {
            this.calleft -= 340;
            if (this.calleft < -1200) {
                this.calleft = 0
            }
        },
        //鼠标悬停时停止移动
        stopmove() {
            clearInterval(this.timer)
        },
        //点击按钮左移
        zuohua() {
            this.calleft -= 340;
            if (this.calleft < -1200) {
                this.calleft = 0
            }
        },
        //点击按钮右移
        youhua() {
            this.calleft += 340;
            if (this.calleft > 0) {
                this.calleft = -1020
            }
        },
    },

    
}

</script>

<style scoped>
.top_s_box_wrap{ width:1200px; margin:0 auto; text-align:center; overflow:hidden; padding:306px 0 0 0;background: pink;}
.top_s_box_l{ float:left; padding:80px 26px 0 0;}
.top_s_box_l:hover{cursor:pointer;}
.top_s_box_m{ float:left;}
.top_s_banner_a{ float:left; text-align:center; padding:0 24px;}
.top_s_banner_a:hover{cursor:pointer;}
.top_s_box_r{ float:left; padding:80px 0 0 25px;}
.top_s_box_r:hover{cursor:pointer;}


 /* 轮播部分 */
.threeImg {
    position: relative;
    height: 180px;
    min-width: 1000px;
}
 
.threeImg .Containt ul {
    margin: 0 auto;
    width: 2300px;
    position: absolute;
    cursor: pointer;
    height: 100%
}
 
.threeImg .Containt ul li {
    width: 300px;
    margin-right: 40px;
    margin-top: 10px;
    float: left;
}
 
.threeImg .Containt ul li img {
    height: 167px;
    width: 320px;
    padding: 0px 30px 0px 15px;
}
 
.Containt {
    position: relative;
    width: 1020px;
    height: 180px;
    overflow: hidden;
    margin: 0 auto;
}
 
.iconleft {
    position: absolute;
    width: 20px;
    height: 80px;
    top: 35px;
    z-index: 99999;
    padding-top: 48px;
    vertical-align: middle;
    padding-left: 30px;
}
 
.iconright {
    position: relative;
    left: 978px;
    top: 70px;
    position: absolute;
    width: 20px;
    height: 80px;
    top: 35px;
    z-index: 99999;
    padding-top: 48px;
    vertical-align: middle;
    padding-left: 170px;
}

{
    "swipers":[
         {
            "gname":"业务",
            "group":[
               {
                  "name": "进口商品追溯平台",
                  "url": "",
                  "img": "../../static/csj/img/banner_s1.png"
				}, 
                 {
                  "name": "中小外贸企业服务专窗",
                  "url": "",
                  "img": "../../static/csj/img/banner_s2.png"
				}, 
                {
                  "name": "跨境银行服务",
                  "url": "",
                  "img": "../../static/csj/img/banner_s3.png"
				}
            ]
        },
        {
            "gname": "新闻公告",
            "group": [
                {
                    "title": "政银携手予智予力予策，打造单一窗口服务闭环",
                    "info" : " "
                   
                },
                {
                    "title": "关于对进口高风险非冷链集装箱货物实施流向及处置登记管理的通知",
                    "info" : " "
                }
            ]
        }
    ]   
}

Answer 1

https://blog.csdn.net/xxxxxxxxYZ/article/details/96155176?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_v2~rank_aggregation-2-96155176.pc_agg_rank_aggregation&utm_term=ajax读取本地txt&spm=1000.2123.3001.4430