VueJS를 사용한 사용자 지정 필터

안녕하세요 독자 여러분,

이 블로그 게시물에서는 VueJS를 사용하여 사용자 지정 필터 구성 요소를 만드는 방법을 살펴보겠습니다. 전체 프로젝트에서 필요할 때마다 이 필터를 재사용할 수 있습니다. 이는 필요에 따라 결과를 필터링하는 데 매우 유용할 수 있습니다.

이제 사용자 지정 필터 코딩을 시작하겠습니다.

더 진행하기 전에 더 많은 업데이트를 위해 저를 팔로우하세요

[삭제 된 사용자]

먼저 Components 폴더(gotoFilterComponent.vue)에 src\components 파일을 만들고 아래 코드를 추가합니다.

<template>
  <div>
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: "FilterComponent",
  props: {
    value: String,
  },
};
</script>

위의 코드에서 입력된 입력 값을 value 에 바인딩하고 이 값은 문자열 유형의 소품으로 정의되며 입력 이벤트를 내보냅니다.

이제 이 사용자 지정 FilterComponent를 사용하려는 파일로 이동하고 아래 코드를 추가합니다. App.vue에 추가하겠습니다.

<template>
  <div id="app">
    <div class="text-left">
      <h3>Cutsom Filter using VueJs</h3>
      <FilterComponent v-model="search" />
      <ul v-for="user in searchResult" :key="user.id">
        <li>{{ user.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import FilterComponent from "./components/FilterComponent";

export default {
  name: "App",
  components: {
    FilterComponent,
  },
  data() {
    return {
      search: null,
      users: [
        { id: 1, name: "john", email: "[email protected]" },
        { id: 2, name: "lee min", email: "[email protected]" },
        { id: 3, name: "alexa", email: "[email protected]" },
        { id: 4, name: "rosy", email: "[email protected]" },
        { id: 5, name: "joy", email: "[email protected]" },
        { id: 6, name: "john", email: "[email protected]" },
      ],
    };
  },
  computed: {
    searchResult() {
      if (this.search) {
        return this.users.filter((item) => {
          return this.search
            .toLowerCase()
            .split(" ")
            .every((v) => item.name.toLowerCase().includes(v));
        });
      } else {
        return this.users;
      }
    },
  },
};
</script>

위의 코드에서 FilterComponent를 가져오고 결과를 검색/필터링하기 위해 v-model="search"를 할당했습니다.

계산된 속성에서 검색/필터 결과를 정의하고 결과를 반환합니다.

searchResult() 메서드는 결과를 반환합니다. 검색에 가치가 있는지 여부를 확인합니다. 값이 있는 경우 사용자에 대한 필터를 적용하고 사용자 배열에서 일치하는 값을 반환하고 검색이 비어 있으면 완전한 사용자 배열을 반환합니다.

App.vue에서 스크립트 태그 뒤에 css를 추가합니다.

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.text-left {
  text-align: left;
}
input {
  padding: 7px;
  border-radius: 4px;
  border: 1px solid gray;
  box-shadow: 7px 7px 19px -6px rgba(0, 0, 0, 0.72);
  -webkit-box-shadow: 7px 7px 19px -6px rgba(0, 0, 0, 0.72);
  -moz-box-shadow: 7px 7px 19px -6px rgba(0, 0, 0, 0.72);
}
</style>

필터 결과와 더 나은 이해를 위해 아래 코드 및 상자를 참조할 수도 있습니다.



❤️ 🦄 즐거운 독서.... ❤️ 🦄