[Vuejs]-Bind selected option $index with vue.js

0👍

First, make sure you are using v-bind (abbreviated as :) as shown below:

<select 
    v-model="selectedDistrictIndex" 
    name="address[district_id]"
    id="address[district_id]"
    class="form-control"
>
    <option value="0" selected disabled>
    Choose district
    </option>
    <option 
        v-for="district in places[cityIndex].districts" 
        :value="$index"
    >
        @{{ district.name }}
    </option>
</select>

And use a computed to get the districtId like this:

computed: {
    selectedDistrictId: function () {
        return this.places[this.cityIndex].districts[this.selectedDistrictIndex].id;
    }
}

Leave a comment