Vuejs에서 어레이를 필터링할 때 문제가 발생하시겠습니까?

Vuejs에서 어레이를 필터링할 때 문제가 발생하시겠습니까?

data() {
    return {
      searchString: '',
      sortKey: 'name',
      checked: false,
      Item,
      items: [{
        price: '1',
        name: 'mm'
      }, ],

      computed: {
        computedItems() {
          return this.items.map((item, index) => {
            item.key = `item_${index}`
            return item
          })
        },
        index: function() {
          let searchString = this.searchString
          let itemsClone = [...this.items] // Change added
          const sortedArray = itemsClone.sort((a, b) => {
            if (a[this.sortKey] < b[this.sortKey]) return -1
            if (a[this.sortKey] > b[this.sortKey]) return 1
            return 0
          })
          if (!searchString) {
            return sortedArray
          } else {
            searchString = searchString.trim().toLowerCase()
            const search_array = sortedArray.filter((items) => {
              if (items.name.toLowerCase().indexOf(searchString) !== -1) {
                return items
              }
            })
            return search_array
          }
        }
      }

    <div class="wrapper">
      <input
        type="text"
        v-model="searchString"
        placeholder="search items from here"
      />
      <br />

      <virtual-list
        class="list"
        style="height: 360px; overflow-y: auto"
        data-key="key"
        :keeps="20"
        :data-sources="computedItems"
        :data-component="Item"
      />
      <hr />
    </div>

Vuejs에서 어레이를 필터링할 때 문제가 발생하시겠습니까?

항목 목록을 렌더링할 수 있지만 문제가 발생하여 배열 파일을 필터링할 수 없음.v-model을 입력 검색 필드 안쪽에 가져간 다음 여기에 계산된 속성을 쓰지만 여전히 오류가 발생함

내 검색 입력 내 v-model을 사용하여 데이터를 필터링할 수 있는가?

확인하다.filter()기능을 하다

오른쪽 하단의 콘솔 오른쪽에 있는 "문제" 탭을 확인하십시오.

• Expected to return a value at the end of arrow function. (array-callback-return)

구현 내용은 다음과 같다.

const search_array = sortedArray.filter((items) => {
  if (items.name.toLowerCase().indexOf(searchString) !== -1) {
    return items
  }
})

필터 기능은 다음과 같이 작동한다.

const search_array = sortedArray.filter((item) => {
  return item.name.toLowerCase().indexOf(searchString) !== -1;
});

너는 돌아가야 한다.true항목을 보관해야 하는 경우 항목 자체가 아니라
JavaScript에서items진정한 의미의 값이고 그것은 유효한 코드다.그것은 단지 에슬린트 경고일 뿐이지만, 여기서 중요한 경고다.

다음 문서를 참조하십시오..filter():
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

검색 기능 설정

올바른 검색 값 변수를 사용하는 것을 잊어버린 경우.
네가 이름 지었잖아filterValue데이터로.index사용하다this.searchString.
그래서 이것을 첫 줄에 고치는 것이다.index():

let searchString = this.filterValue

출력하는 경우{{ index }}템플릿에서 입력하는 동안 필터링된 배열을 실시간으로 볼 수 있다.

입력을 기준으로 항목을 필터링하도록 코드로 샌드박스 업데이트.

computedItems() {
  let initItems = this.items.map((item, index) => {
    item.key = `item_${index}`
    return item
  })

  return initItems.filter((item) => item.name.includes(this.filterValue))
},

참조URL: https://stackoverflow.com/questions/70214286/issue-when-trying-to-filter-array-in-vuejs