css - 跳过 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>

到目前为止一切都很好，除了当我像这样设置数组时第一个值看起来没有结果是空的：

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

结果显示如下：

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

Answer 1

使用v-for+ v-if（见指南）

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

更新： 添加了更好的方法

例子：

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/vue@2.6.11/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>

Answer 2

伏地米尔写了什么

<li v-for="(value, index) in array" v-if="value.firstName">
      {{ value.firstName }} - index: {{index}}
</li>

排除名字为空或为空的数据似乎很好。但是为了避免第一条记录（这就是你问的），我能想到的最好的方法是，

<li v-for="(value, index) in array" v-if="index">
  {{ value.firstName }} - index: {{index}}
<li>

第一条记录的索引将为 0，并且v-if(index)将为false.

Answer 3

改变

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

至

this.arrayresults = []