I am currently working on a project using Laravel 5.5, Vue.js 2, and Lodash. I am trying to skip the first incoming data in the result, similar to the image shown below. Below is the code for my Vue.js 2 implementation:
new Vue({
el:'#users',
data:{
message:'',
ok:false,
noresult:false,
arrayresults: [{id:'' ,username: '',useremail: '',userphone:'',}],
},
methods:{
searchData: _.debounce(function(){
if(this.message != '')
{
this.noresult = false;
this.arrayresults = [{id:'' ,username: '',useremail: '',userphone:'',}],
$.ajax({
type:'POST',
url: path+'usersearch',
data: {data:this.message},
success:(data) => {
if(data.length >= 1)
{
for(i = 0;i<data.length;i++)
{
this.arrayresults.push({id:data[i]['id'],username:data[i]['user_name'],useremail:data[i]['user_email'],userphone:data[i]['user_phone']})
}
this.ok = true;
}
else
{
this.ok = false;
this.noresult = true;
}
},
error:function()
{
console.log("error");
}
});
}
else
{
this.ok = false;
this.arrayresults = [{id:'' ,username: '',useremail: '',userphone:'',}];
}
},1000)
}
});
Here's my Laravel Blade code:
<div v-if="ok" id='search-result' v-cloak>
<table class='table table-responsive thead-text' border='5'>
<thead>
<tr class='success'>
<td>{{trans('language.user_name')}}</td>
<td>{{trans('language.user_phone')}}</td>
<td>{{trans('language.user_email')}}</td>
<td>{{trans('language.settings')}}</td>
</tr>
</thead>
<tbody>
<tr v-for='(arrayresult ,key ,id) in arrayresults' class='warning'>
<td>@{{arrayresult.username}}</td>
<td>@{{arrayresult.userphone}}</td>
<td>@{{arrayresult.useremail}}</td>
<td class='hidden-print'>
<a v-bind:href="'/{{$path}}/users/' + arrayresult.id" class='btn btn-success'>{{trans('language.show')}}</a>
@can('users.update')<a v-bind:href="'/{{$path}}/users/' + arrayresult.id + '/edit'" class='btn btn-info'>{{trans('language.edit')}}</a>@endcan
</td>
</tr>
</tbody>
</table>
</div>
Everything seems to be working fine so far except for the issue where the first value appears as null when setting the array like this:
this.arrayresults = [{id:'' ,username: '',useremail: '',userphone:'',}],
The current result looks like this:
https://i.sstatic.net/Pdg1F.png
To resolve this, I aim to eliminate the first null value from the search results.