展示在过滤函数中使用的prop - axios, vue3-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

展示在过滤函数中使用的prop - axios, vue3

P粉439804514 2023-09-08 10:56:43

[Vue.js讨论组]

718

当使用axios获取数据时，如何在filteredProducts中显示道具。我已经通过了如下所示的道具。

export default {
  data() {
    return {
      filteredProducts: [],
    };
  },
  mounted() {
 axios
 .get('/src/stores/sneakers.json')
 .then(response => { const products = response.data
  this.filteredProducts = products.filter(product => product.name.includes('Nike'))
})
  },
  computed: {
        resultCount () {
            return Object.keys(this.filteredProducts).length 
        },
    },
  props: {
    brand: {
      type: Object,
    },
  },

我想用正在传递的品牌名称替换“耐克”。非常感谢

P粉439804514

全部回复(2)

P粉8721016732023-09-09 09:13:18 2楼

选择名为“Nike”的产品并将其传递到 filteredProducts 中。之后，您可以使用计算属性更改名称并在模板中使用它。

<template>
  <div 
    v-for="(item, i) in nikeProducts"
    :key="i"
  >
  </div>
</template>

<script>
export default {
  props: {
    brand: {
      type: Object
    }
  }
  data() {
    return {
      filteredProducts: [],
    };
  },
  mounted() {
    axios
      .get('/src/stores/sneakers.json')
      .then(response => { 
          const products = response.data
          this.filteredProducts = products.filter(product => product.name.include('Nike'));
      })
  },
  computed: {
    nikeProducts() {
      return this.filteredProducts.map(product => product.name = this.brand.name)
    }
  }
}
</script>

赞 +0

添加回复

P粉5292450502023-09-09 09:09:06 1楼

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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>