无法使用 axios 和实体框架从多个表中获取数据

Question

我正在获取<pre> 标签内的所有数据。但是，我只将 Account 表数据放入我为显示而创建的表中。同时获取其他表数据需要进行哪些更改？

下一个应用vue.js页面代码

        <tbody>
            <tr scope="row" v-for="(user, index) in posts" :key="user.Acc_ID">
            <td>
            <pre>{{user.Billings[0]}}</pre></td>
            <td>{{ index + 1 }}</td>
            <td>{{ user.Name}}</td>
            <td>{{ user.Billings[0].[{"BillId"]}}</td>
            <td>{{ user.Shippngs[0]['ShipId']}}</td>
            <td>{{ user.Email}}</td>
            <td>{{ user.EmailSub}}</td>
            <td>{{ user.PhoneCode}}</td>
            <td>{{ user.PhoneNumber}}</td>
            <td>{{ user.AccAddress1}}</td>
            <td>{{ user.AccAddress2}}</td>
            <td>{{ user.AccDistrict}}</td>
            <td>{{ user.AccCity}}</td>
            <td>{{ user.BillAddress1}}</td>
            <td>{{ user.ShipAddress1}}</td>            
            <td>{{ user.Request}}</td>                     
            <td>{{ user.StartDate}}</td>         
            </tr>
        </tbody>
        </table>   
    </div>
      <NuxtLink to="AccountDetailsPage">Account Information Page</NuxtLink><br>     <!--Link to next page -->
         <NuxtLink to="Accountbackup">Backup</NuxtLink>
  </b-container>
</div>     
</template>

<script>
// Importing axios to perform http methods
import axios from 'axios';  
var users;
export default {
    name: 'consume-rest-api',
    data(){
        return{
            posts: null
        }
    },
    data2(){    return{
            posts2: null,
            name2:null
        }
    },
    created() { //Get method axios 
        axios.get(`https://localhost:44394/api/accounts`)            
            .then(response => { 
                // JSON responses are automatically parsed.
                this.posts = response.data    
                users = response['data']     
            })
            .catch(e => {
                console.log("Error Please check the connection")  
            });
    },
   
}
</script> 

  

Asp.net core web api Get方法使用entiy框架核心同时获取三个表数据。

    // GET: api/Accounts
    [HttpGet]
    public async Task<ActionResult<IEnumerable<Account>>> GetAccounts()
    {
        var products = dbObj.Accounts
            .Include(p => p.Billings)
            .Include(q => q.Shippngs);

        return await products.ToListAsync(); ;
    }

Answer 1

好吧，这里有个误会。我看到您正在使用data2() 和data()。这是不正确的。您应该为您的页面使用一个data()，例如：

data(){
    return{
        posts: null,
        posts2: null,
        name2:null
    }
},

然后把你想要的任何变量放在那里。它应该可以解决您的问题。

更新

为您的情况添加一个 sn-p，我实现了两种显示数据的方法；建议使用第一种显示Billings 字段的方式。

new Vue({
  el: '#app',
  data() {
    return {
      items: [{
        "AccId": 57303,
        "Name": "Nipuni Nishadika",
        "BName": "NNstore",
        "PhoneCode": 11,
        "PhoneNumber": 75485456,
        "AccAddress1": "Liyanagemulla",
        "AccAddress2": "Seeduwa",
        "AccCity": "Seeduwa",
        "AccDistrict": "colombo",
        "Email": "Nipuni@bistecglobal.com",
        "StartDate": "2021-04-10T00:00:00",
        "Billings": [{
          "BillId": 87384,
          "BillAddress1": "Liyanagemulla",
          "BillAddress2": "Seeduwa",
          "BillCity": "Seeduwa",
          "AccId": 57303
        }],
        "Shippngs": [{
          "ShipId": 77443,
          "ShipAddress1": "Liyanagemulla",
          "ShipAddress2": "Seeduwa",
          "ShipCity": "Seeduwa",
          "Request": "Callme",
          "EmailSub": "yes",
          "IsChecked": null,
          "AccId": 57303
        }]
      }, ]
    }
  },
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>

<div id="app">
  <table class="table">
    <thead>
      <tr>
        <th>AccID</th>
        <th>Billings</th>
        <th>Shippings</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.AccId">
        <td>{{ item.AccId }}</td>
        <td v-for="billing in item.Billings" :key="billing.BillId">{{ billing.BillId }}</td>
        <td>{{ item.Shippngs[0].ShipId }}</td>
      </tr>
    </tbody>
  </table>
</div>