i have created vue file to display data in frontend. but i'm unable to print 2 tables on same page at same time. only table 2 is displaying data , in first table it shows data for 2 seconds and than disappears. what i'm doing wrong? please help. i am super new in vuejs and have not much knowledge.

here is my index.vue file,

Table 1

            <tbody>
              <tr
              v-show="items && items.length"
              v-for="(data, i) in items"
              :key="i">
                   <td></td>
                   <td></td>
             </tr>

and this is function code,

async fetchData1() {
  this.$store.state.operations.loading = true;
  let currentPage = this.pagination ? this.pagination.current_page : 1;
  await this.$store.dispatch("operations/fetchData", {
    path: "/api/calldata?page=",
    currentPage: currentPage   "&perPage="   this.perPage,
  });

table 2

<tbody>
              <tr
              v-show="items && items.length"
              v-for="(data, i) in items"
              :key="i">
                   <td></td>
                   <td></td>
             </tr>

and here is the function for table 2

async fetchData2() {
  this.Loading2 = true
  let currentPage = this.Pagination2 ? this.Pagination2.current_page : 1;
   await this.$store.dispatch("operations/fetchData", {
    path: "/api/datacall/data2?page=",
    currentPage: currentPage   "&perPage="   this.perPage,
  });
  this.Loading2 = false;

and this are the controller functions

public function index(Request $request)
{
  return DataResource::collection(Datamodl::with('user')->where('type',1)->latest()->paginate($request->perPage));
}

public function index2(Request $request)
{
  return DataResource::collection(Datamodl::with('user')->where('type',0)->latest()->paginate($request->perPage));
}

And Route ,

Route::get('/calldata/data2', [DataController::class, 'index2']);
Route::apiResource('calldata', DataController::class);

CodePudding user response：

you are using same property which is items for both. so second request will changed first items. so in both table same data will visible. you have to store in different state property for different data rendering.

solution :

1. make another action fetchData2.

2. call another mutation setItems2. add state propery item2: []. and setItems2 value from this mutation.

3. render second table like this.

        <tr
          v-show="items2.length"
          v-for="(data, i) in items2"
          :key="i">
               <td></td>
               <td></td>
         </tr>
   

For code quailty:

1. give proper and related variable name . don't use items1 and items2 like that.

2. never used v-if/v-show and v-for in same element.for more info

   use template first in this senerio.

3. use the item's unique id instead of the index in the key.

4. if you take the items default value as [], instead of null, then you only required to check items.length instead of items && items.length. so always use list default value []

5. if both requests are not dependent on each other then you should use Promise.all() for fetching data concurrently. which saved tremendous time and also in this case you don't require two loading property.

CodePudding user response：

Observation : You are updating same variable which is items for both the tables. Hence, it is overriding the latest items with the old items array.

Solution : Here is the implementation as per my comment. I hope it will help for better understanding.

new Vue({
  el: '#app',
  data: {
    table1Items: null,
    table2Items: null
  },
  mounted() {
    this.fetchData1();
    this.fetchData2();
  },
  methods: {
    fetchData1() {
        this.table1Items = [{
        id: 1,
        name: 'table 1 alpha'
      }, {
        id: 2,
        name: 'table 1 beta'
      }]
    },
    fetchData2() {
        this.table2Items = [{
        id: 1,
        name: 'table 2 alpha'
      }, {
        id: 2,
        name: 'table 2 beta'
      }]
    }
  }
})

table, th, td {
  border: 1px solid black;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <thead>
      <th>ID</th>
      <th>Name</th>
    </thead>
    <tbody>
      <tr v-show="table1Items" v-for="(data, i) in table1Items" :key="i">
        <td>{{ data.id }}</td>
        <td>{{ data.name }}</td>
      </tr>
    </tbody>
  </table>

  <table>
    <thead>
      <th>ID</th>
      <th>Name</th>
    </thead>
    <tbody>
      <tr v-show="table2Items" v-for="(data, i) in table2Items" :key="i">
        <td>{{ data.id }}</td>
        <td>{{ data.name }}</td>
      </tr>
    </tbody>
  </table>
</div>