Vue-js - Getting equals from array with v-for

Question

I can't get the object I want with v-for. What I want is to show the data belonging to the category in the array we have specified below with v-for. As an example ( item.category == 'scare' ) I want to show only those that satisfy this condition.

<div class="row">
    <app-card v-for="item in filterItems('category-title')" :item="item" :key="item"></app-card>
    </div>

---

state : {
    Filmler : [

        { 
        title : "Savaş Yaklaşıyor",
        img : "https://occ-0-3175-778.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABYvvc_FWuuEYiV_UrE7znSFkT_H9r87jFr8Mr24WAMnWofuwjs1yWnhJXNTvXCdXmGNckHsp74p7h_Fp6ijS92QAZQcdyEe1-wmmwi2nuFTGXS6jyGdU8M5qGxy_yQpG3puq8YEUyHy6T3HsJ8NTnvcvIfXUfM8uLG-nVbTLrcnKL4d0jvtkgrc.jpg?r=b35",
        logo : "https://occ-0-3175-778.1.nflxso.net/dnm/api/v6/tx1O544a9T7n8Z_G12qaboulQQE/AAAABfjvGBNRMinRnlgGxSXhLFb9avpos2mCV4KigWnwvrzkBIEgHL1x09s0FthiHrJbsOXI-hdeHgT9Cmo6qC5us0pKsO4uNoPpKifveY6Hco1SCz22RTXVf9rxqcctyPHZFHZRbchzglfh0C8O_Sm6n9KRtas-bEqO8b1leTTKNsbk.webp?r=692",
        videosrc : "https://istr-n3.nktcdn.com/data/videos/10643/10643145-360_2-135k.mp4?playername=sinemalar&token=vt62lElmiixW_NcEeHJlig&ts=1643188938",
        newAndDate : "Yeni",
        category : "Sürükleyici",
        age : 13,
        year : 2022,
        time : "1 sa. 37 dk.",
        videoQuality : "HD",
        altKategoriler : [
            "Romantik","İyi Hissettiren","Samimi"
        ],
        likeDislikeButton : true,
        listeyeEklendi : false,
        },

        { 
        title : "Archive 81",
        img : "https://occ-0-3175-778.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABfQyX4d-uvw4itxnOmvOQOyl1rDN2uhFmkeVW3WQlWx005l6j9YrbJA4wihE3C6ZyaObjpadSTd2iZrqVjaUz0uElU2hLXuwJIJhgJU1tRbJd3TEMUOGO9ZFhPvmTPeFLFlnxDMroPhu-pnoLg7IMQJL1FO-eMD9ND-zugz35-u7pTKUu6iVC7U.jpg?r=2aa",
        logo : "https://occ-0-3175-778.1.nflxso.net/dnm/api/v6/tx1O544a9T7n8Z_G12qaboulQQE/AAAABVr1A_8ur_xDcBzflTRe9Fk4c1M35L63foL1rk99P2zlgDM0bq9VddHJ4K5bQU_2njeybRxx1PqjBjXNUFUDU_oVMbOcEk01eVGgDaRp7zYNYUqtsiEH8TNrhKeB3EgVVO7WuIlYU6RfrlSrx2eL3vSUdh-XQ3j8x7PDP-E_VwRV.webp?r=3f4",
        videosrc : "https://istr-n2.nktcdn.com/data/videos/10653/10653467-360_2-135k.mp4?playername=sinemalar&token=7qlP_TYyiRvP9lykrqB0GA&ts=1643191473",
        newAndDate : "%98 Eşleşme",
        age : 18,
        year : 2022,
        category : "Sürükleyici",
        time : "1 Sezon",
        videoQuality : "HD",
        altKategoriler : [
            "Akılalmaz","Tehditkar","Psikolojik"
        ],
        likeDislikeButton : true,
        listeyeEklendi : false,
        },

      

    ],
    categoryTitles : {
        netflixTop : "Netflix'te Popüler",
    }
},

---

Answer 1

You should be a computed

computed: {
    filter() {
      return this.filmler.filter((film) => film.category === "scare");
    },
  }

and then it should be like this v-for="item in filter"