텍스트 상자에 입력하는 동안 목록 검색 VueJs

텍스트 상자에 입력하는 동안 목록 검색 VueJs

배열의 사용자 목록이 있습니다.그리고 상단에 있는 검색창(이름)을 기준으로 필터링을 하고 싶습니다.VueJs 1에는 필터가 있습니다만, VuesJs 2에서는 사용할 수 없습니다.VueJs 2에서 이를 실현하는 방법

<input type="text" v-model="search"/>   
<div class="row profile" v-for="customer in customers">
 <div class="col-md-offset-1 col-md-3"><img :src="customer.profile_pic" class="profile-pic" /></div>
 <div class="col-md-8"><h4 class="name">{{customer.name}}</h4></div>
</div>
<script>
    data: function () {
      return{
        search: '',
        customers: [
          { id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'ab@gmail.com', phone:'+91959657248', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'abcd@gmail.com', phone:'+919456664023', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'test@gmail.com', phone:'+919566565065', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'sample@gmail.com', phone:'+916466004566', unread:'0' }
        ]
      }
    }
</script>

데이터 요소를 사용하여 속성을 "어레이"하고 필터링된 요소를 사용하여 계산된 속성(어레이도)을 설정함으로써 이 작업을 수행했습니다.HTML은 필터링된 요소를 렌더링합니다.텍스트 상자에 바인딩된 자산이 있습니다.심플화를 위해 다음과 같은 것이 있습니다.

data: function () {
      return{
        search: '',
        customers: [
          { id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'ab@gmail.com', phone:'+91959657248', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'abcd@gmail.com', phone:'+919456664023', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'test@gmail.com', phone:'+919566565065', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'sample@gmail.com', phone:'+916466004566', unread:'0' }
        ]
},
computed:
{
    filteredCustomers:function()
    {
        var self=this;
        return this.customers.filter(function(cust){return cust.name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
    }
}

HTML을 filteredCustomers에 바인드합니다.검색에서 입력한 내용에 따라 반응형 HTML이 생성됩니다.이 "filter" 메서드는 어레이용 네이티브 JavaScript이므로 대소문자를 구분하지 않도록 두 값을 모두 소문자로 구분했습니다.

다음은 바이올린에 관한 작업 예시입니다.https://jsfiddle.net/dkmmhf5y/1/

편집: 계산된 속성에 바이올린 및 코드 수정 추가

vuejs 2에서 필터가 제거되었습니다.@azamat-sharapov에서 제안했듯이 다음 3가지 방법 중 하나를 사용하여 재사용 가능한 필터를 사용할 수 있습니다.

2.0에서는 어떻게 하면 좋을까요?

• 믹스인
• 다른 모듈(방식 포함)
• 계산 프롭 기능이 있는 별도 모듈

vuejs2에서의 필터의 간단한 실장은 필터링 리스트를 취득하는 메서드를 호출할 수 있는 계산 속성을 사용할 수 있다.통과시킬 수 있는 메서드에서 쿼리하면 필터링된 목록을 반환할 수 있습니다.다음 코드와 작업 데모를 참조하십시오.다음은 믹스인 또는 모듈로 이동할 수 있으며 다중 컴포넌트에서 재사용할 수 있는 일반적인 기능입니다.

var vm = new Vue({
  el: '#demo',
  data: {
    customers: [
          { id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'ab@gmail.com', phone:'+91959657248', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'abcd@gmail.com', phone:'+919456664023', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'test@gmail.com', phone:'+919566565065', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'sample@gmail.com', phone:'+916466004566', unread:'0' }
        ],
    columns: {
      id : {
        displayname : "id",
        sortorder : 1
      },
      name : {
        displayname : "name",
        sortorder : 1
      },
      email : {
        displayname : "email",
        sortorder : 1
      }
    },
    query: '',
   },
  computed: {
    tableFilter: function () {
        return this.findBy(this.customers, this.query, 'name')
    }
  },
  methods: {
    findBy: function (list, value, column) {
      return list.filter(function (item) {
        return item[column].includes(value)
      })
    }
  }
})

이 방법은 나에게 효과가 있었다.

computed: {
   filteredList() {
     return this.postList.filter(post => {
       var vm = this;
       return post.title.toLowerCase().includes(vm.search.toLowerCase())
     })
   }
}

Nathan의 답변은 마음에 들지만, 저는 이것이 더 잘 작동할 것이라고 생각합니다. 그리고 그것은 필요 없습니다.var self = this과제.또한 Vue eslint 플러그인이 eslint를 사용할 때 eslint를 계속 사용할 수 있습니다.indexOf존재감을 찾을 때.여기 있습니다.

data: function () {
      return{
        search: '',
        customers: [
          { id: '1', name: 'user 1', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'ab@gmail.com', phone:'+91959657248', unread:'0' },
          { id: '2', name: 'user 2', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'abcd@gmail.com', phone:'+919456664023', unread:'0' },
          { id: '3', name: 'user 3', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'test@gmail.com', phone:'+919566565065', unread:'0' },
          { id: '4', name: 'user 4', profile_pic: 'https://i.stack.imgur.com/CE5lz.png', email:'sample@gmail.com', phone:'+916466004566', unread:'0' }
        ]
},
computed:
{
    filteredCustomers () {
      return this.customers.filter((customer) => {
        return customer.name.toLowerCase().includes(this.search.toLowerCase())
      })
    }
}

        <!-- Searching Bar Start -->
        <div class="form-group mb-2">
        <span style="float:left; margin:0 10px; padding-top:5px; color:black;">Search:</span>
        <input v-model="search" class="form-control" placeholder="Filter users by Queue" style="width:30%;">
            </div>
        <!-- Searching Bar End -->

<td style="width:25%;cursor:pointer;color: blue;" class="tablecolthree" @click="sortbytotal('pending_duration_day')">Pedning Duration <i class="fa fa-sort" aria-hidden="true"></i></td>

        return {
            search:'',
            dupsearch:'',
            currentSort:'pending_duration_day',
            currentSortDir:'asc',
        }
        methods: {
        sortbytotal:function(s) {
            this.dupsearch='sort';
            this.search='';
            if(s === this.currentSort) {
                this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
            }
            this.currentSort = s;
        },
            date(e){
            if(this.stdate){
                var fromdate = [];
                this.loading = true;
                fromdate.push(moment(this.stdate).format('YYYY-MM-DD'));
                this.showstart = moment(this.stdate).format('MMM DD, YYYY');
                axios.get('/open-ticket-detail?date='+fromdate).then(response => {
                    this.openticketdetail = response.data;
                    this.loading = false;
                    //console.log(this.openticket);
                })
            }
            e.preventDefault();   
        }
        },
        computed:{
        sortedCats:function() 
        {
            var self=this;
            if(self.search!=''){
               this.dupsearch='';
            }

            if(this.dupsearch=='sort'){
                return this.openticketdetail.open_tickets.sort((a,b) => {
                    let modifier = 1;
                    if(this.currentSortDir === 'asc') modifier = -1;
                    if(a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
                    if(a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
                    return 0;
                });
            }
            return this.openticketdetail.open_tickets.filter(function(openticket){return openticket.queue_name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
        },
    },

`computed: {
    filteredResources(){
         return this.Surveyors.filter((surveyor)=>{
         return surveyor.Name.toLowerCase().match(this.searchQuery.toLowerCase());  
         })
      }
    }`

/설문자는 데이터 테이블 이름이고, 평가관은 고객 사례에서와 같이 데이터 테이블 이름이며/

언급URL : https://stackoverflow.com/questions/41712791/search-a-list-while-typing-in-textbox-vuejs-2