選択したオプション$ indexを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" 

を使用しようとするが、それは以下に示すように、あなたが（:と略す）v-bindを使用していることを確認し、

Answer 1

まず動作しません。

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

012を取得するために計算を使用してくださいは次のようになります。

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