使用vue.js绑定选定的选项$ index

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