v-for vuejs2의 첫 번째 결과 건너뛰기

v-for vuejs2의 첫 번째 결과 건너뛰기

나는 래러벨 5.5과 부에즈2와 하숙 프로젝트에서 일하고 있다.아래 이미지처럼 결과적으로 먼저 오는 데이터는 건너뛰고 싶다.이건 내 부에즈2 코드야

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

이게 내 애러블 블레이드 코드야

        <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:'',}],    

결과는 다음과 같다.

검색에서 첫 번째 null 값을 제거하고 싶다.

사용하다v-for+v-if(가이드 참조)

v-for가 동일한 노드에 있을 경우 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>

볼디미르가 쓴 것

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

이름이 null이거나 비어 있는 데이터는 제외해도 괜찮아 보인다.하지만 첫 번째 기록을 피하기 위해(그건 네가 물어본 거야), 내가 생각할 수 있는 가장 좋은 방법은

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

1차 기록 시 지수는 0이 될 것이며,v-if(index)될 것이다false.

변화하다

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

로

this.arrayresults = []

참조URL: https://stackoverflow.com/questions/47876764/skip-first-result-from-v-for-vuejs2