CODEWITHSUNDEEP
javascriptvue.jsv-for
Josh Gilbert
Josh Gilbert

Reputation: 89

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.

Upvotes: 0

Views: 43

Answers (1)

Abregre
Abregre

Reputation: 480

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.

Upvotes: 1

Related Questions