vue js dynamic filter names in html

Question

I have a nested v-for in my html, and in every iteration I need to apply filter. The filter itself is the same, but it should work only in current iteration.

For now, my v-for looks like this (it's also Laravel Blade templating, that's why I need these @):

<div class="col s4" v-for="(ind, campaign) in campaigns">
    <select class="select-class" v-model="tags_filter_@{{ind}}" multiple style="height: 150px;">
        <option value="">all</option>
        <option v-for="tag in tags" value="@{{tag.title}}">@{{tag.title}}</option>
    </select>

    <select v-model="campaign.selectedWebsites" multiple class="mdc-select__surface select-class" style="height: 300px;" id="web_select_@{{ind}}">
        <option v-for="(index, website) in websites | filterBy tags_filter_@{{ind}}" id="website_@{{ind}}_@{{website.id}}" value="@{{website.id}}">@{{website.url}}</option>
    </select>
</div>

And it doesn't work. I need websites in each campaign to be filtered by their own tag select. But if I remove _@{{ind}} from v-model and filterBy, logically it becomes the same model everywhere, and works on all iterations at the same time.

How can I fix it?

Coffee · Accepted Answer · 2018-01-30 09:51:08Z

1

I changed @{{ind}} to [ind] in v-model and filterBy, and it worked out.

answered Jan 30, 2018 at 9:51

Coffee

2,2939 gold badges32 silver badges57 bronze badges

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

Collectives™ on Stack Overflow

vue js dynamic filter names in html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related