我无法在 vue.js 中对我的数组实施过滤器

Question

我已经找了好久了，但作为一个新手，我找不到答案。我想用属性的 id 过滤我的数组，我认为这是错误的语法。感谢您的帮助

组件

export default {
  props: ["user", "recette"],
  data() {
    return { email: this.$route.params.email };
  },
  components: {},
  methods: {},
  computed: {
    filteredItems: function () {
      return this.recette.filter((recettes) => {
        return recettes.cat_recetteId === 1;
      });
    },
  },
};

查看

<template>
  <div>
    <myrecette :recette="recette"/>
    <myfooter />
  </div>
</template>

<script>
import myrecette from "../components/recette";
import myfooter from "../components/myfooter";

export default {
  name: "",
  data() {
    return {
      recette: "",
      user: "",
    };
  },
  components: {
    myrecette,
    myfooter,
  },
  created: function() {
    this.axios.get("http://localhost:3000/recette/all_recette/").then((res) => {
      (this.recette = res.data.recette),
        this.axios
          .get(
            "http://localhost:3000/user/rec_user/" + this.$route.params.email
          )
          .then((res) => {
            this.user = res.data.user;
          });
    });
  },
};
</script>
<style scoped></style>

节点

router.get("/all_recette", (req, res) => {
    db.recette
        .findAll({
            include: { all: true },
        })
        .then((recette) => {
            if (recette) {
                res.status(200).json({
                    recette: recette,
                });
            } else {
                res.json("il n'y a pas de recettes");

            }
        })
        .catch(err => {
            res.json(err);
        });
});

这是我的完整代码以及我的节点路由。

我的错误return是

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: this.recette.filter is not a function"

Answer 1

您的过滤器回调函数应该 return true 或 false。你 1) 没有 returning 任何东西和 2) 分配一个值 (=) 而不是进行比较 (==/===)。

computed: {
    filteredItems: function() {
      return this.recette.filter(function(recettes) {
        return recettes.cat_recetteId === 1;
      });
    },
  },

Answer 2

过滤器的工作原理是保留 return true 的项目，因此如果您希望所有项目的 cat_recetteId 为 1，您可以将其更改为：

computed: {
  filteredItems: function() {
    if (!this.recette) return [];
    return this.recette.filter((recettes) => {
      return recettes.cat_recetteId === 1;
    });
  },
},

在大多数情况下，在计算内部使用箭头函数也是一种很好的做法。

我无法在 vue.js 中对我的数组实施过滤器

I cannot implement a filter to my array in vue.js

javascript

vue.js

vue-component

vuejs2

vue-reactivity