使用map时如何在Vue.js上创建搜索筛选器

Question

我试着在vue做了一次搜索，但没有成功。我试着做一个计算函数，每次我在搜索中有一个词来过滤产品的那个词，但是我不明白为什么它不能工作我的产品。

 async getProducts() {
      this.$store.dispatch("actions/setLoading", true);
      const products = (await ProductService.getProducts()).data.products;
      this.dataSource = products.map((product, key) => {
        return {
          key: key + 1,
          image_url: (
              <div class="record-img align-center-v">
                <img
                  src={product.image_url}
                  alt={product.product_name}
                  width="100"
                />
              </div>
            ),
          product_name: (<a href={product.product_url}>{product.product_name}</a>),
          price: product.price,
          price_with_discount: product.price_with_discount,
          categories: product.categories,
          sku: product.sku,
          quantity: product.quantity,
          currency: product.currency,
          action: (
            <div class="table-actions">
              asds
              <a href="javascript:void(0)"><sdFeatherIcons type="trash-2" size={14} /> Test</a>
            </div>
          )
        }
      });
      this.$store.dispatch("actions/setLoading", false);
    }

我的滤波函数

watch: {
      search() {
return this.dataSource.filter(product => product.product_name.toLowerCase().includes(searchText.value.toLowerCase()))
    }
}

<a-table
                  :rowSelection="rowSelection"
                  :pagination="{ pageSize: 10, showSizeChanger: true }"
                  :dataSource="dataSource"
                  :columns="columns"
                />

Answer 1

作为观察者的函数的行为类似于方法，而不是计算函数。你可以写一个计算的属性-

 computed:{
     computedDataSource(){
         return this.dataSource.filter(product => product.product_name.toLowerCase()
        .includes(searchText.value.toLowerCase()))
      }

html -

<a-table :rowSelection="rowSelection"
         :pagination="{ pageSize: 10, showSizeChanger: true }"
          :dataSource="computedDataSource"
           :columns="columns"/>