从v-for vuejs2中跳过第一个结果

Question

我正在使用laravel 5.5和vuejs2以及lodash项目.我想跳过结果中的第一个数据,如下图所示.这是我的vuejs2代码.

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)
}
});

这是我的laravel刀片代码:

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

到目前为止一切都还可以,但是当我像这样设置数组时,第一个值看起来为null而没有结果:

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

结果显示如下:

我想从搜索中删除第一个空值.

Answer 1

使用v-for+ v-if(参见指南)

当它们存在于同一节点上时,v-for的优先级高于v-if.这意味着v-if将分别在循环的每次迭代中运行.当您只想为某些项目渲染节点时,这非常有用,如下所示:

例:

new Vue({
  el: '#app',
  data: {
    array: [
    {
      firstName: '',
      lastName: '',
      age: 0
    },
    {
      firstName: 'Dirk',
      lastName: 'Doe',
      age: 41
    },
    {
      firstName: 'Julia',
      lastName: 'Doe',
      age: 25
    }
    ]
  }
})

<script src="https://unpkg.com/vue@2.5.11/dist/vue.js"></script>
<div id="app">
  <li v-for="(value, index) in array" v-if="value.firstName">
      {{ value.firstName }} - index: {{index}}
  </li>
  <pre>{{ array }}</pre>
</div>

Answer 2

改变

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

到

this.arrayresults = []