v-model and select multiple

Question

I have the following code in my view:

<div class="item_editor_line">
    <label>Artist(s): </label>
    <select multiple
            name="artists[]"
            v-model="artist_ids"
            id="artists">
        <option v-repeat="artists"
                value="@{{ id }}">
                @{{ name }}
        </option>
    </select>
</div> 

and I populate the artist_ids variable with a method called in ready().

When I look at the resultant page though, I see nothing selected in the artists dropdown. artist_ids can be confirmed to be correctly populated though, and when I push another id to it in the console, Vue does pick up on this and select all the artists that it should.

What am I doing wrong? How can I get v-model="artist_ids" to select from the dropdown appropriately before the page loads?

Answer 1

You can use the built-in options attribute to render the options, rather than looping the list with v-repeat. Just make sure your data is formatted appropriately.

Example:

data: {
    selected_artists: [ 5678 ],
    artists: [
       { text: 'Some Artist', value: 1234 },
       { text: 'Another Artist', value: 5678 }
    ]
}

You can then use the built in options rendering:

<select multiple name="artists[]" v-model="selected_artists" options="artists"></select>

Here's a codepen which also shows using v-repeat instead: http://codepen.io/anon/pen/LpZBom