使用Vue中v-model双向绑定Select出现问题

Question

相关参数

couponsData： [{"name":"9折折扣券","description":"活动最新获取","discount":0.9,"id":"x1"},{"name":"8折折扣券","description":"活动进行获取","discount":0.8,"id":"b2"}]

代码示例

                <div class="coupons_content col-xs-12">
                    <!-- select -->
                    <div class= "coupons_select col-xs-12"> 
                        <!-- 优惠券项 -->
                        <select class="coupons_item col-xs-12" v-model = "selectCouponsItem" >
                            <option value="" disabled >请选择</option>
                            <option v-for="(item,index) of couponsData" :value = "item.id" v-bind:key="index">{{item.name}}</option>
                        </select>
                    </div>
                </div>

问题出现

当我选中item下的某项数据之后，除了被选中的option的参数无变化，其他option的value都会变成当前选中的参数value，相关key值已经绑定但是还是会被强行覆盖

我想要达到的结果

通过切换相关option，其他value值不被强行覆盖

Answer 1

<option v-for="(item,index) of couponsData" :value = "item.id" v-bind:key="index">{{item.name}}</option>
改为
<option v-for="(item,index) of couponsData" :value = "item.id" v-bind:key="index" :label="item.name" />