Pre selecting a selectbox option in vue.js

I made a vue.js component to populate a field of text dependant on what was selected in a dropdown box. When the component loaded it needed to display the currently associated option. In Laravel blade you would write a ternary that checked the current option being added by a foreach loop with the currently associated value.

@foreach($variances as $variance)
                <option value="{{$variance->id}}" {{($variance->id ===$material->variance_id)?"selected":""}}>
                        {{$variance->name}}
                </option>
@endforeach

I tried this approach in my vue template trying to write a ternary that altered the :selected vue directive.

<option v-for="prelim in prelimdata" :value="prelim" :selected="prelim.id === id_check ? 'selected' : ''">{{ prelim.name}}</option>

This didn’t work. I had to write a for loop after the initial axios request that retrieved all the options and set the associated one to the selected_option model.

I used this recently which simplifies the process. You pass the current_category in with a axios get or by passing in as a prop.

<label><h5 class="mt-3 ml-2">Category</h5></label>
<select class="form-control mt-1" v-model="selected" @change=checkCategory>
    <option v-for="category in categories"
                :value="category.id"
                :selected="category.id === current_category.id">
                {{category.category_name}}
    </option>
</select>