Показать список на странице, созданной с помощью Vue и Axios

Question

Я хочу показать список на своей странице просмотра. Я уже извлекаю данные из базы данных с помощью Axios API и сохраняю их в список.

Я извлек данные на созданной странице, но когда моя страница загрузилась, списокпусто.

Я уверен, что я получаю данные успешно, потому что, если я вызываю их с помощью кнопки, она показывает данные, моя проблема в том, как показать данные при загрузке?

вот мой код с использованием ядра asp.net, 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

Я делаю что-то подобное.Я axios звоню на mounted.

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
})
export class HomePage extends Vue{
    teamState = TeamServiceSingleton;
    private teamList = [];

    mounted() {
        teamState.fetchTeam()
           .then(() => this.teamList= this.teamState.teamList));
    }

}

Answer 2

попробуйте

   <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>