計算されたプロパティ[組成API ]を使用したVuejs 3検索バー

商品のようなアイテムのリストがあるときはいつでも、より良いユーザ体験のためにクライアント側で検索項目機能を持つことは明らかです.
VUE 3の組成のAPIでは、我々は簡単に計算されたプロパティを使用して検索バーを作成することができます.
実際には、これは計算されたプロパティを使用するための完璧なケースの一つです.

私は、あなたがすでに得る方法を知っていると仮定しますUp and Running With Vue JS 3 Project Using Vue CLI .
私がproductlistを持っていると言いましょう.Vueページベースのコンポーネントは、私はそれに検索機能を追加する製品のリストが表示されます.
productlistVue

<template>
</template>

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

製品データを入手

製品のリストを得るために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.

私はすでにいくつかの製品を追加しましたCloud Firestore FIFIBASEが提供するデータベースの一つであり、以下のイメージに似ています.
これは、製品ドキュメントのリストを含む製品と呼ばれるコレクションを持っています.

ご覧のように、各製品ドキュメントにはいくつかのプロパティがあります.

タイトル

UPC

ブランドなど.

何も空想!
コンポーネントにデータを取得しましょう.
まず、先頭にインポートFireBaseだけでなく、インポートとVueからの反応をインポートします.

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は避けられません.

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.

検索バー

ご存知のように、Vue 3ではテンプレートタグの中に複数の兄弟要素を作成できます.
したがって、単に製品リストのHTMLコードの上に検索入力フィールドを右側に追加します.
Continue Reading...