vue中select设置默认选中
vue中select设置默认选中
一、总结
一句话总结:
通过v-model来:select上v-model的值为option默认选中的那项的值(value)
二、select设置默认选中实例
博客对应视频位置:1、vue中select设置默认选中
https://fanrenyi.com/video/7/22
1 <div class="form-group"> 2 <label class="col-sm-2 control-label">所属课程</label> 3 <div class="col-sm-10"> 4 <div style="line-height: 34px;"> 5 <button type="button" v-for="lesson in lessons" :class="[lesson_id==lesson.l_id ? 'btn btn-success btn-xs' : 'btn btn-info btn-xs']" style="margin-right: 5px;margin-bottom: 5px;" @click="get_chapters(lesson.l_id)">@{{ lesson.l_title }}</button> 6 </div> 7 8 </div> 9 </div> 10 <div class="form-group"> 11 <label for="v_c_id" class="col-sm-2 control-label">所属章节</label> 12 13 <div class="col-sm-10"> 14 <select v-model="chapter_select" name="v_c_id" id="v_c_id" class="form-control" required> 15 <option v-for="chapter in chapters" :value="chapter.c_id">@{{chapter.c_name}}</option> 16 </select> 17 </div> 18 </div> 19 20 <script> 21 //console.log(window.chapter_url); 22 new Vue({ 23 el:"#edit_video", 24 data:{ 25 lessons:window.lessons, 26 chapters:window.chapters, 27 lesson_id:window.lesson_id, 28 chapter_select:window.video_chapter_select, 29 }, 30 methods:{ 31 get_chapters:function (lesson_id) { 32 this.lesson_id=lesson_id; 33 let url=window.get_chapters_url+'/'+lesson_id; 34 this.$http.post(url, {_token: "{{csrf_token()}}"}).then(function (result) { 35 layer_alert_success('获取数据成功!'); 36 // 通过 result.body 拿到服务器返回的成功的数据 37 this.chapters=result.body.chapters; 38 //console.log(result.body) 39 //console.log(result.body.data.data) 40 },response => { 41 // error callback 42 layer_alert_fail('获取数据失败!'); 43 44 }) 45 } 46 } 47 }); 48 </script>
第14行:给select元素绑定的v-model的值是 默认option的value
第28行:这里是设置 chapter_select 的默认值
通过v-model来:select上v-model的值为option默认选中的那项的值(value)
三、参考资料:vue中select的使用以及select设置默认选中
转自或参考:vue中select的使用以及select设置默认选中
https://www.cnblogs.com/till-the-end/p/8473738.html
简介
今天写pc端引入vue,遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示,结果查了好多文档,讲的都不是很清楚,后来看到一句提示,试了一下发现居然还有这种隐藏属性。所以,我决定自己写下来,讲清楚。
解决过程
html代码如下,通过v-model可以获取到选中的值,如果option中存在value属性,优先获取value值即coupon.id,如果不存在,则获取option的文本内容,也就是下面代码中coupon.name.
<select name="public-choice" v-model="couponSelected" @change="getCouponSelected"> <option :value="coupon.id" v-for="coupon in couponList" >{{coupon.name}}</option> </select>
首先说明,html这样写没有任何问题,动态的select的正确使用方法就是这样。
下面是js代码:
var vm = new Vue({ el: '#app', data:{ couponList:[ { id: 'A', name: '优惠券1' }, { id: '1', name: '优惠券2' }, { id: '2', name: '优惠券3' } ], couponSelected: '', }, created(){
//如果没有这句代码,select中初始化会是空白的,默认选中就无法实现 this.couponSelected = this.couponList[0].id; }, methods:{
}
})
上面的js代码是正确的,我下面说明一下隐藏属性是什么
隐藏属性就是
当我们把v-model中的couponSelected,也就是data里的couponSelected的值赋值为循环的option中的value后,那这个option就会被默认选中
小结
这篇文章其实主要是说select默认选中的问题,select使用以及数据获取只是顺带说明,vue关于表单元素的使用,如单选,复选可以参考官方文档,现在的官方文档其实已经写得很不错了,放链接https://cn.vuejs.org/v2/guide/forms.html,感兴趣的话可以看一下,试一下。