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

Question

I've been looking for quite a while but being a novice I can't find an answer. I would like to filter my array with the id of a property I think is the wrong syntax. Thanks for your help

components

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;
      });
    },
  },
};

VIEW

<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>

NODE

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);
        });
});

Here is my complete code as well as my node route.

My error return is

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

please share your whole script

Boussadjra Brahim
– Boussadjra Brahim

2020-12-12 19:28:20 +00:00
Commented Dec 12, 2020 at 19:28 — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 12, 2020 at 19:28

Dan · Accepted Answer · 2020-12-12 19:39:47Z

1

The filter works by keeping items which return true, so if you want all items having a cat_recetteId of 1, you would change it to:

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

It's also good practice to use an arrow function in most cases inside of a computed.

edited Dec 12, 2020 at 19:39

answered Dec 12, 2020 at 19:14

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brother Woodrow · Accepted Answer · 2020-12-12 19:14:28Z

1

Your filter callback function should return true or false. You're 1) not returning anything and 2) assigning a value (=) instead of doing a comparison (==/===).

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

answered Dec 12, 2020 at 19:14

Brother Woodrow

6,3923 gold badges22 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related