Skip first result from v-for vuejs2

Question

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.

Flournoy

Change this.arrayresults = [{id:'' ,username: '',useremail: '',userphone:'',}] to this.arrayresults = []. – Pash

Answer 1

Change

this.arrayresults = [{id:'' ,username: '',useremail: '',userphone:'',}] 

to

this.arrayresults = []

Frascati

Answer 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>

Polished

This is going to work but is not considered a good pratice anymore. It would be better to and even more flexible to make a computed prop that returns the filtered rows instead. – Landy

Answer 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.

Chung

Using v-if on the same element that has v-for is a bad practice. Official document – Maddis