这篇文章主要介绍了vue日志之如何select选中默认值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
如何用select选中默认值
在写这个问题之前也查阅了网上很多种答案，下面我来说一下几种不可行的方式以及可行的方式。
干货来了。
先贴一下view和model
推广物：
选择推广任务的公众号
data() { return { detail: { aid: 0, }, accountList: [], ... }; }, methods: { getAccountList() { //获取公众号 this.$fetch(`/popularize/account/list/2`).then(response => { if (response.errorCode == 0) { let data = response.data; this.accountList = data; } }); }, }先说下网上的第1种
mounted() { ... this.getAccountList(); document.getElementsByTagName('select').selectIndex = 0 // console.log('sid',document.getElementsByTagName('select').selectIndex ) },这种方式只操作了dom,没有操作数据，selectIndex是可以打印出来的。但是在vue中并没有作用。
第2种
created () { // select初始化 this.detail.aid = this.accountList[0].id; //默认选中第一项 },有人把这个id初始化放在mounted, 也有人放在created其实并没有太大的区别，created时就可以获取的到后端传来的数据了。所以这里你created和mounted一样的。那么这个时候就会报一个错：
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'id' of undefined"
found in ...
这个时候大家就会迷茫，为什么id会变成undefined呢，这里的id是指detail还是accountList里的id，那么我们去看data里面是否有定义，没有就给他初始化一下，当然，你以为这个时候好了，其实并没有。为什么呢，因为你console.log(this.accountList)一下，会发现它是空数组，有人说我mounted里面已经调用this.getAccountList( )方法了，然后在下面在写一个this.detail.aid = this.accountList[0].id;就好了。
其实不是的，当你获取这个方法的时候，页面只能做一件事，就是获取这个列表，并不能同时把id赋值给列表的某项。所以这个时候我们需要做的是，请求这个接口时就赋值，在created或者mounted里初始化，那么我们来改造一下这段代码：
mounted() { // select初始化 this.$fetch(`/popularize/account/list/2`).then(response => { if (response.errorCode == 0) { let data = response.data; this.accountList = data; this.detail.aid = this.accountList[0].id; //默认选中第一项 初始化 } }); },上面我们说过了从后台拿到的数据给他赋值，如果是我们自己定义的数据呢，那就更简单了。接下来
第3种，先贴自定义数据
广告限量模式：
这个时候我们把后端绑定的字段mode的值设置为第一项的option的value就行，在data中初始化就可以了。
data() { return { detail: { ... aid: 0, mode: 0, }, }到此已写清了从前端和后端怎样设置第一项为默认值。
vue select js 设置默认值
这个地方我是用vue进行渲染的select
对于每个选项如下
execFunc("company.getcompanylist", {}, function(result) { var vucom = new Vue({ el : '#companylist', data : { data : [] }, created(){ //默认值渲染必须 this.couponSelected = hcompanyid; }, methods : { getCompanyId : function(event) { $("#companyid").val(event.target.value); } } }); vucom.data = result.data; })execFunc是我自己封装的一个ajax请求
以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。
以上就是vue日志之如何用select选中默认值的详细内容，更多请关注0133技术站其它相关文章！
