Skip first result from v-for vuejs2
Solution 1
Change
this.arrayresults = [{id:'' ,username: '',useremail: '',userphone:'',}]
to
this.arrayresults = []
Solution 2
use v-for
+ v-if
(see guide)
When they exist on the same node, v-for has a higher priority than v-if. That means the v-if will be run on each iteration of the loop separately. This can be useful when you want to render nodes for only some items, like below:
UPDATED: Added a better approach
example:
new Vue({
el: '#app',
computed: {
filteredArray() {
return this.array.filter(item => !!item.firstName);
},
},
data: {
array: [
{
firstName: '',
lastName: '',
age: 0
},
{
firstName: 'Dirk',
lastName: 'Doe',
age: 41
},
{
firstName: 'Julia',
lastName: 'Doe',
age: 25
}
]
}
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
<li v-for="user in filteredArray">
{{ user.firstName }} - age: {{user.age}}
</li>
<pre>old array = {{ array }}</pre>
</div>
Solution 3
What Voldymyr wrote
<li v-for="(value, index) in array" v-if="value.firstName">
{{ value.firstName }} - index: {{index}}
</li>
seems fine to exclude data which has got firstname null or empty. But to avoid the first record (that's what you asked), the best way I can think of is,
<li v-for="(value, index) in array" v-if="index">
{{ value.firstName }} - index: {{index}}
<li>
The index will be 0 for the first record, and v-if(index)
will be false
.
Awar Pulldozer
Updated on July 30, 2022Comments
-
Awar Pulldozer almost 2 years
I'm working with laravel 5.5 and vuejs2 and lodash project. I want to skip first coming data in result like the image below. This is my vuejs2 code.
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) } });
This is 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 is ok so far except that the first value is looking null without result when i set the array like this:
this.arrayresults = [{id:'' ,username: '',useremail: '',userphone:'',}],
The result shows like this:
I want to remove the first null value from the search.