I am using map() function to return an array for my data and display they in a dynamically way for my table in vue js. I get an error when i use paginate method : map() is not a function. Here is the vue table with function

<thead >
<tr>
  <th><input type="checkbox"  v-model="selectAll" title="Select All"></th>
  <th v-for="(header, index) in visibleHeaders" :key="index" scope="col">
     {{ header }}
  </th>
  <th>Action</th>
</tr>
</thead>
<tbody>
 <tr v-show="leads.length" v-for="(column, index) in visibileColumn" :key="index">
  <td>
   <input type="checkbox"  v-model="selected" :value="column.id" />
  </td>
  <td v-for="atr in column">{{atr}}</td>
  <td>
   <a >View</a>
   <button type="button"   data-mdb-toggle="modal" data-mdb-target="#editUserModal" >Edit</button>
   <button type="button"  >Delete</button>
  </td>
</tr>
<tr v-show="!leads.length">
  <td colspan="12" >Sorry :( No data found.</td>
</tr>
</tbody>

//script
data() {
        return {
            headers: [],
            leads: [],
            field: '',
        }
    },

computed: {
        visibleHeaders() {
            return this.headers.map(h => {
                return h.Field.replace("_", " ").toUpperCase()
            });
        },
        visibileColumn() {
            return this.leads.map(c => {
                // console.log(c)
                return c
            })
        },
    },

methods: {
   getData() {
            axios.get('/leads/getleads')
            .then(response => {
                this.leads = response.data.leads
                this.headers = response.data.headers
                // console.log(response.data.leads)
            })
        },
}

And laravel controller function

public function getleads(Request $request)
    {
        $table_name = 'leads';
        // Through raw query
        $query = "SHOW COLUMNS FROM $table_name";
        $data = DB::select($query);

        if ($request->ajax()) {
            return response()->json([
                'leads' => Lead::paginate(10),
                'headers' => $data
            ], Response::HTTP_OK);
        }
    }

if i use 'leads' => Lead::get(), this method works fine but when i use paginate(10) i get an error

app.js:34778 [Vue warn]: Error in render: "TypeError: this.leads.map is not a function"

CodePudding user response：

the paginate method returns an object with data field and other fields explained here, so you should do :

this.leads = response.data.leads.data