vue.js 未捕获(承诺中)类型错误：obj. filter不是函数

7y4bm7vi 于 2022-12-23 发布在 Vue.js

关注(0)|答案(2)|浏览(164)

<script setup> 
import { ref, onMounted, onBeforeMount ,reactive  ,computed} from 'vue';
import { useRoute } from 'vue-router';
import ApiService from '../../services/api.service';

const route = useRoute();  
const productId = route.params.productId; 
const products = ref([]);

const obj = reactive(products);
onMounted(() => {
    
    ApiService.getProduct().then((data) => (products.value = data));
  
});
const searchedProducts =computed( () => {
    obj.filter(product => productId.includes(product.productId))
    
  
});

console.log(searchedProducts);

</script>

<template>
    <p>datas {{searchedProducts}}</p>
</template>

onMounted以获取所有记录，然后计算searchedProducts fillter productId wise，但{{searchedProducts}}未显示，在控制台中出现错误未捕获（在承诺中）TypeError：obj.filter不是函数

vue.js

来源：https://stackoverflow.com/questions/74892598/uncaught-in-promise-typeerror-obj-filter-is-not-a-function

2条答案

按热度按时间

dwbf0jvd1#

您可以这样使用它：

const obj = reactive({products});
...
const searchedProducts =computed( () => {
    return obj.products.filter(product => productId.includes(product.productId))
    
  
});

赞(0）回复(0）举报 2022-12-23

rryofs0p2#

你得到这个错误的原因是你在reactive()里面 Package 了一个ref()，而没有使用一个对象，所以你需要添加一个.value来使它像下面这样工作。

const searchedProducts = computed(() => {
  return obj.value.filter((product) => {
    return product.id === productId;
  });
});`

但您可能希望像下面的示例那样执行此操作，以使ref()值展开：

const obj = reactive({ products });

...

const searchedProducts = computed(() => {
  return obj.products.filter((product) => {
    return product.id === productId;
  });
});

还有两点需要指出：
1.您正在使用.includes()比较产品ID。使用严格的比较会更可靠。
1.你忘了一个return语句。

赞(0）回复(0）举报 2022-12-23

我来回答

vue.js 未捕获(承诺中)类型错误：obj. filter不是函数

2条答案

相关问题

热门标签

最新问答