계산된 속성을 사용하는 Vuejs 3 검색 표시줄 [Composition API]

제품과 같은 항목 목록이 있을 때마다 더 나은 사용자 경험을 위해 클라이언트 측에 검색 항목 기능이 있는 것이 분명합니다.

Vue 3 Composition API에서는 계산된 속성을 사용하여 검색 표시줄을 쉽게 만들 수 있습니다.

실제로 이것은 계산된 속성을 활용하는 완벽한 사례 중 하나입니다.



나는 당신이 Up and Running With Vue JS 3 Project Using Vue CLI을 얻는 방법을 이미 알고 있다고 가정합니다.

검색 기능을 추가하려는 제품 목록을 표시하는 ProductList.vue 페이지 기반 구성 요소가 있다고 가정해 보겠습니다.

ProductList.vue

<template>
</template>

<script>
export default {
  setup() {},
};
</script>

Firebase에서 제품 데이터 가져오기

제품 목록을 얻기 위해 서버에 HTTP 요청을 해보자.

이 예에서는 Firebase을 사용하지만 따라하기 위해 Firebase를 알 필요는 없습니다.

구성 요소 내에서 항목 배열 목록을 만드는 것보다 실제 HTTP 요청을 만들어 데이터를 가져오는 것이 더 합리적입니다.

If you want to know more about how to get started with Firebase in your Vue project, check this link here.

Firebase에서 제공하는 데이터베이스 중 하나인 Cloud Firestore에 이미 몇 가지 제품을 추가했는데 아래 이미지와 같습니다.

여기에는 제품 문서 목록을 포함하는 제품이라는 콜렉션이 있습니다.



보시다시피 각 제품 문서에는 다음과 같은 몇 가지 속성이 있습니다.

제목

업

브랜드 등.

멋진 것은 없습니다!

이제... 데이터를 구성 요소로 가져오겠습니다.

먼저 상단에서 Firebase를 가져오고 vue에서 onMounted 및 반응형을 가져옵니다.

The onMounted() method is one of the lifecycle methods in Vue 3 Composition API and it’ll be called when the Vue component is added to the DOM.

setup() 함수 내에서 나중에 모든 제품을 포함할 빈 배열로 제품 변수를 초기화합니다.

import firebase from "firebase";
import { onMounted, reactive } from "vue";
export default {
  setup() {
    const products = reactive([]);
    onMounted(async () => {
      try {
        const productsSnap = await firebase
          .firestore()
          .collection("products")
          .get();
        productsSnap.forEach((doc) => {
          products.push(doc.data());
        });
      } catch (e) {
        console.log("Error Loading Products");
      }
    });
    return { products };
  },
};

two ways to define reactive variables in Vue 3 Composition API이 있습니다. 가능한 경우 ref보다 반응형을 사용하는 것을 선호하지만 때로는 ref가 불가피합니다.

Recommended
Must-Know Ref vs Reactive Differences In Vue 3 Composition API

그런 다음 Firebase 제품 컬렉션에 요청하고 문서를 반복한 다음 제품 배열로 푸시합니다.

마지막으로 setup() 함수는 템플릿이 액세스할 수 있도록 제품 배열을 반환합니다!

꽤 직설적 인!

Normally, I use a reusable module file to do all the CRUD async operations but for this example I put everything in a single component to make this article shorter.

You can learn more about how to create Reusable Modules as well as Components In Vue 3 Composition API

제품 목록 보기

제품 배열을 반복하고 템플릿에 제목, upc 기타 정보를 표시합니다.

<template>
  <div class="ui cards" style="margin: 10px">
    <div
      class="card ui fluid"
      v-for="product in products"
      :key="product.id"
      style="margin: 0"
    >
      <div class="content">
        <img class="right floated mini ui image" :src="product.imageURL" />
        <div class="header">{{ product.title }}</div>
        <div class="meta">
          {{ product.upc }} | {{ product.weight }} Kg |
          {{ product.itemsperpack }} pack
        </div>
      </div>
    </div>
  </div>
</template>

출력은 다음과 같습니다.

I use Semantic UI CSS framework to speed up the UI designing process – feel free to use your own CSS framework.

검색창 UI 추가

아시다시피 Vue 3에서는 템플릿 태그 내에 여러 형제 요소를 만들 수 있습니다.

따라서 제품 목록 HTML 코드 바로 위에 검색 입력 필드를 추가하기만 하면 됩니다.

Continue Reading...