Question

我想在我的视图页面中显示列表我已经使用Axios API从数据库中获取数据并将其存储到列表

我确实在创建的页面上获取数据，但是当我的页面加载时，列表为空。

我非常确定我成功获取数据，如果我用按钮调用它，它会显示数据我的问题是如何在加载时显示数据？

这里是使用asp.net core，vue和axios

的代码

import Vue from 'vue';
import { render, staticRenderFns } from './HomePage.vue.html';
import Component from 'vue-class-component';
import { TeamServiceSingleton } from '../services/TeamServices';

@Component({
    render, staticRenderFns,
    created: async function (this: HomePage) {
        await this.teamState.fetchTeam();
    }
})
export class HomePage extends Vue{
    teamState = TeamServiceSingleton;

    get teamLists() {
        return this.teamState.teamList;
    }
}

这是我的API

[Produces("application/json")]
    [Route("api/v1/team")]
    public class TeamApiController : Controller
    {
    private readonly AbsenDbContext DB;

    public TeamApiController(AbsenDbContext absenDbContext)
    {
        this.DB = absenDbContext;
    }

    //SELECT * FROM team;
    [HttpGet]
    public async Task<IActionResult> Get()
    {
        var data = DB.Team.Select(Q => new TeamModel
        {
            Name = Q.Name,
            TeamId = Q.TeamId,
            TeamLeaderId = Q.TeamLeaderId
        }).ToListAsync();

        return Ok(data);
    }
}

我的服务来调用API

export class TeamServices extends Vue {
    teamList: ITeamModel[] = [];

    async fetchTeam() {
        //let response =
        Axios.get('api/v1/team').then(response => { this.teamList = response.data.results });
        //this.teamList = response.data;
    }
}

最后我的观点

<div>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Leader</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="team in teamLists">
                <td>test</td>
            </tr>
        </tbody>
    </table>
</div>

身体表没有显示任何数据，因为空队列表

有人能帮帮我吗？如何在页面上填充和显示列表？谢谢

Answer 1

试试这个

   <div>
<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Leader</th>
        </tr>
    </thead>
    <tbody>
          <tr v-for="team in teamLists">
             <td>test</td>
          </tr>
       </tbody>
    </table>
</div>
 <script>
   import sv from "your file location"//service file here
   export default {
    data(){
          return{
                teamList :null // instead of null you can also use this.fetchTeam();
           }
         }
       },
    created(){
       this.fetchTeam();
      },
   methods: {
     mydatalist(){
        Axios.get('api/v1/team').then(response => { this.teamList = response.data.results });
     }

    }
 </script>

Answer 2

我做了类似的事情。我是对axios的{{1}}电话。

mounted

在使用vue和axios创建的页面上显示列表

2 个答案: