using V-for loop with filtered data set

I am filling values in a table using the code below

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

Answer

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">
  {{ ... }}
</td>

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 initialCastData.map( 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.