Bind selected option $ index with vue.js

Question

Как связать выбранный параметр Индекс с помощью vue.js? Код выбора:

<select 
     v-model="address.districtId" 
     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="@{{district.id}}" 
     > 
      @{{ district.name }} 
     </option> 
    </select> 

Я пытаюсь использовать

v-model:address.districtIndex="$index" 

, но он не работает

Answer 1

Во-первых, убедитесь, что вы используете v-bind (сокращенно :), как показано ниже:

<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> 

И используйте рассчитанное для получения districtId:

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