[Vuejs]-Vue.js changing all selects with v-for

by

0👍

✅

I’ve changed my array to include tours as a nested array in response.data. So I could loop through it in select v-for:

<div v-for="(item, index) in hosters" v-bind:key="item.id" class="col-md-6 mb-50">
    <h4 class="mb-0">{{ item.name }} {{ item.lastname }}</h4>

    <div class="tour-options-select">
        <select id="select-suggestions" name="tour-options-dropdown" class="tour-options-dropdown">
            <option v-for="tour in item.tours">{{ tour.title }}</option>
        </select>
    </div>
</div>

So I’m getting all users data into a single response and working based on it.

👤madsongr

3👍

You’re using v-model="tour". Which means all the users share the same v-model. You probably want to use a tours model property which would hold an array matching your array of users. Or it could be an object, where you use the user.id as key.

i.e: v-model="tours[user.id]"

Another option (which probably makes more sense, I wouldn’t know without a minimal reproducible example), is to save each tour inside its respective user object and use v-model="user.tour". In which case, if you need all tours, you could use: 

const allTours = users.map(u => ({id: u.id, tour: u.tour}))
👤tao

Leave a comment