フィルター関数で使用されるプロパティを表示 - axios、vue3
P粉439804514
P粉439804514 2023-09-08 10:56:43
0
2
573

axios を使用してデータを取得するときに filteredProducts にプロパティを表示する方法。以下に示すようにpropsを渡しました。

リーリー

「Nike」をブランド名に置き換えて継承したいと考えています。どうもありがとうございます###

P粉439804514
P粉439804514

全員に返信(2)
P粉872101673

「Nike」という名前の製品を選択し、filteredProducts に渡します。その後、計算されたプロパティを使用して名前を変更し、それをテンプレートで使用できます。

リーリー
いいねを押す +0
P粉529245050
export default {
              data() {
                return {
                  products: [],
                };
              },
              mounted() {
                   this.getSneakers();
              },
              methods: {
                 getSneakers() {
                 axios
                  .get('/src/stores/sneakers.json')
                   .then(response => { 
                  this.products = response.data ?? [];
                      })
                  }
               },
              computed: {
                    resultCount () {
                        return this.filteredProducts?.length ?? 0
                    },
                    brandName() {
                        return this.brand?.name ?? "";
                    },
                    filteredProducts () {
                        return this.products?.filter(
        product => product.name?.toLowerCase()?.includes(this.brandName.toLowerCase())
                   )
                    },
                },
              props: {
                brand: {
                  type: Object,
                },
              },
          }
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート