Vue.js 无法使用axios和EntityFramwork从多个表中获取数据

我正在获取

标记中的所有数据。但是，我只将Account表数据获取到我创建用于显示的表中。同时获取其他表数据需要进行哪些更改

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

  

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

    // 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(); ;
    }

{{user.Billings[0]}
{{index+1}}
{{user.Name}
{{user.Billings[0].{“BillId”]}
{{user.Shippngs[0]['ShipId']}
{{user.Email}
{{user.EmailSub}
{{user.PhoneCode}
{{user.PhoneNumber}
{{user.accdress1}
{{user.accdress2}
{{user.acccdistrict}
{{user.AccCity}
{{user.BillAddress1}}
{{user.ShipAddress1}}
{{user.Request}
{{user.StartDate}
账户信息页面

备份
//导入axios以执行http方法
从“axios”导入axios；
var用户；
导出默认值{
名称：“使用rest api”，
数据（）{
返回{
帖子：空
}
},
data2（）{return{
posts2:null，
name2:null
}
},
created（）{//Get方法axios
axios.get(`https://localhost:44394/api/accounts`)            
。然后（响应=>{
//JSON响应会自动解析。
this.posts=response.data
用户=响应['data']
})
.catch（e=>{
日志（“错误，请检查连接”）
});
},
}

net核心web api Get方法使用Enty framwork core同时获取三个表的数据

//GET:api/Accounts
[HttpGet]
公共异步任务GetAccounts（）
{
var products=dbObj.Accounts
.包括（p=>p.Billings）
。包括（q=>q.shippng）；
返回等待产品。ToListSync（）；
}

好的，这里有一个误解。我看到您使用的是

data2（）

和

data（）

。这是不正确的。您应该为页面使用一个

data（）

，例如：

然后把你想要的变量放进去，它会解决你的问题

更新

为您的情况添加一个代码片段，我实现了两种显示数据的方法；建议使用第一种方法显示

Billings

字段

newvue({
el:“#应用程序”，
数据（）{
返回{
项目：[{
“AccId”：57303，
“名称”：“Nipuni Nishadika”，
“BName”：“NNstore”，
“电话号码”：11，
“电话号码”：75485456，
“AccAddress1”：“Liyanagemulla”，
“AccAddress2”：“Seeduwa”，
“AccCity”：“Seeduwa”，
“阿克区”：“科伦坡”，
“电子邮件”：Nipuni@bistecglobal.com",
“起始日期”：“2021-04-10T00:00:00”，
“比林斯”：[{
“BillId”：87384，
“BillAddress1”：“Liyanagemulla”，
“BillAddress2”：“Seeduwa”，
“比尔城”：“西杜瓦”，
“AccId”：57303
}],
“船舶”：[{
“ShipId”：77443，
“发货地址1”：“Liyanagemulla”，
“ShipAddress2”：“Seeduwa”，
“ShipCity”：“Seeduwa”，
“请求”：“呼叫我”，
“EmailSub”：“是”，
“IsChecked”：空，
“AccId”：57303
}]
}, ]
}
},
})

AccID
比林斯
装运
{{item.AccId}
{{billing.BillId}
{{item.Shippngs[0].ShipId}

调试时，你能得到

产品中的所有数据吗？

我在预标记中得到了这样的数据（我推荐了一些linse）{“AccId”：57303，“Name”：“Nipuni Nishadika”，“BName”：“NN store”，“PhoneCode”：11，“Billings”：[{“BillId”：87384，“BillAddress1”：“Liyanagemulla”，“AccId”：57303}]，“Shippngs:[{“ShipId”：77443，“ShipAddress1:“Liyanagemulla”，“ShipAddress2:“Seeduwa”，“AccId”：57303}]，非常感谢。我删除了数据2（）并将所有内容放入data（）中。但它并没有解决我的问题。您对此有什么建议吗？欢迎光临，您的服务器请求有任何响应吗？{“AccId”：57303，“Name”：“Nipuni Nishadika”，“BName”：“NNstore”，“PhoneCode”：11，“PhoneNumber”：75485456，“acaddress1”：“Liyanagemulla”，“acaddress2”：“Seeduwa”，“accity”：“Seeduwa”，“AccDistrict”：“科伦坡”，“电子邮件”：Nipuni@bistecglobal.com“，”开始日期“：”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“，”请求“：”Callme，“EmailSub”：“yes”，“IsChecked”：null，“AccId”：57303}]}，是的，我正在从三个表中获取我需要的所有数据。问题是我无法将其设置为一个表。我只获取帐户表数据。{{user.Billings[0].BillId}我尝试了这一个，但它得到了一个错误“无法读取属性”。“我更新了答案，并使用

Vue

而不使用

numxt

来显示您的情况。@NipuniWickramasinghe

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