Twitter bootstrap Vue从API获取数据

我是Vue新手，在我使用Vue和Axios将数据传递到我网站上的表格后，表格中只有空白数据。我不确定这是否是来自API的数据的结构方式

3{
    "body": [
        {
            "id": "17",
            "company": "Vooxoo",
            "mobile": null,
            "logo": "2.jpg",
            "opening_hours": "",
            "featured_vendor": "Yes"
        },
        {
            "id": "19",
            "company": "Trendo Designs",
            "mobile": null,
            "logo": "4.jpg",
            "opening_hours": "Mo - Fr: 10:00 AM - 06:00 PM",
            "featured_vendor": "Yes"
        },
        {
            "id": "34",
            "company": "",
            "mobile": null,
            "logo": "",
            "opening_hours": "",
            "featured_vendor": "No"
        }
    ],
    "itemCount": 3
}

我的Vue代码似乎也是正确的，我可以看到登录到控制台的数据

<script>
        var app = new Vue({
          el: '#app',
          data: {
            vendors: []
          },
          mounted:  function(){
           axios.get('https://myapi.com/API/api/read_all_api.php')
              .then(response => {
                this.vendors = response;
                console.log(response);
              })
              .catch(error => {
                console.log(error);
              });
          }
 
        })
    </script>

var app=新的Vue({
el:“#应用程序”，
数据：{
供应商：[]
},
挂载：函数（）{
axios.get（）https://myapi.com/API/api/read_all_api.php')
。然后（响应=>{
此参数=响应；
控制台日志（响应）；
})
.catch（错误=>{
console.log（错误）；
});
}
})

最后，我的html看起来是这样的，我在标题标签中添加了Vue和Axios

                            <div id="app" class="table-responsive">
                                <table id="dtBasicExample" class="table table-striped table-bordered table-sm v-middle" cellspacing="0" width="100%">
                                    <thead>
                                        <tr class="bg-light">
                                            <th class="border-top-0">Company</th>
                                            <th class="border-top-0">Mobile Number Agent</th>
                                            <th class="border-top-0">Opening Hours</th>
                                            <th class="border-top-0">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="vendor in vendors">
                                            <td> {{ vendor.company }} </td>
                                            <td> {{ vendor.mobile }} </td>
                                            <td> {{ vendor.opening_hours }} </td>
                                            <td>
                                                <label class="label label-danger">{{ vendor.featured_vendor }}</label>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

单位
手机号码代理
营业时间
地位
{{vendor.company}}
{{vendor.mobile}}
{{vendor.opening_hours}
{{vendor.featured_vendor}}

---

我已经用几种方法修改了代码，但我不太确定到底是什么问题。我需要帮助。

你需要打开

数据

就像

响应。数据

{ this.vendors=response.data；//{ console.log（错误）； }); }这是我的卖主

---

请不要使用两个不同的帐户，因为我的其他帐户已被阻止，我不确定原因。如果你仔细阅读这个问题，你会发现它不是同一个问题。当我这样做的时候，表中什么都没有显示，我先把它作为一个问题。