Skip to content

using V-for loop with filtered data set

I am filling values in a table using the code below

v-for="(sinto, index) in castData"
:key="index"><p class="ssv" > {{ valueOf(castData[sinto.PartTarget]) }} </p></td>

in my ‘castData’ I have 15 items but I only want to return the ones that include “Sinto” Is there a way of applying this filter. I’ve tried appending .includes(“Sinto”) after the first castData with no luck.



One way would be to manipulate your castData before you pass it to the loop.

<td v-for="(sinto, index) in updateCastData(castData)" :key="index">
  {{ ... }}
export default {
        data() {
            return {
                initialCastData: [
                    { id: 1, sinto: true },
                    { id: 2, sinto: true },
                    { id: 3, sinto: false },
                    { id: 4, sinto: true }
        methods: {
            updateCastData(initialCastData) {
                return castDataItem => castDataItem.sinto )

Then you can run it like the example below v-for="(sinto, index) in updateCastData(`passing the initial array here`)"

As i don’t know the exact form of your data, you should modify the updateCastData function to fit yours.