[Vuejs]-Cant get data from multiple tables using axios and EntityFramwork

by

0👍

✅

Ok, there is a misunderstanding here. I see that you’re using data2() and data(). It’s not correct. you should use one data() for your page like:

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

And then put any variables you want in there. It should fix your problem.

UPDATED

Adding a snippet for your situation, I implemented two ways for showing your data; the first way for showing the Billings field is recommended.

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>

Leave a comment