vue select默认选中,jquery给select设置默认值
本文主要介绍了如何选择vue日志的默认值，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
如何用select选择默认值？先说一下网上的第一种，第二种，第三种，先把自定义数据贴上来。vue select js为每个选项设置如下默认值
如何用select选中默认值
在写这个问题之前，我也在网上查阅了很多答案。我来说几个不可行的办法和可行的办法。
干货来了。
首先发布视图和模型
div class=item
top
Span发起人：/span
选择v-model=detail.aid
option:value= item . id v-for= item in account list :key= item . id { item . name } }/option
/选择
/p
H6 class=bottom 选择推广任务的微信官方账号/h6。
/div
data() {
返回{
详细信息：{
援助：0，
},
帐户列表：[]，
.
};
},
方法：{
getAccountList() {
//获取微信官方账号
这个。$ fetch(`/普及/帐户/列表/2 `)。然后(response={
if (response.errorCode==0) {
let data=response.data
this.accountList=data
}
});
},
}
先说下网上的第1种
已安装(){
.
this . getaccountlist()；
document . getelementsbytagname( select )。选择索引=0
//console.log(sid ，document . getelementsbytagname( select )。选择索引)
},
这样只操作dom，不操作数据。可以打印选择索引。但是在vue里不管用。
第2种
已创建(){
//选择初始化
this . detail . aid=this . account list[0]。id；//默认情况下选择第一项
},
有人在mounted或者created中初始化这个id没有太大区别。创建时，可以从后端获取数据。在这里，您创建了与mounted相同的。此时将会报告一个错误：
[Vue warn]:挂接中的错误：“类型错误：无法读取未定义的属性“id”
发现于.
这个时候，大家都会很迷茫。为什么id变得未定义？这里的id是指detail还是accountList中的id？然后，我们看看data里有没有定义，如果没有，就给他初始化。当然你觉得这个时候好，其实不然。为什么？因为当你console.log(this.accountList)的时候，你会发现它是一个空数组。有人说我在mounted里调用了this.getAccountList()方法，然后写一个this . detail . aid=this . accountlist[0]。id在下面；就是这样。
其实你得到这个方法的时候，页面只能做一件事，就是得到这个列表，不能同时把id赋给列表中的一个条目。因此，此时我们需要做的是在请求此接口时赋值，并在创建或装载时初始化它。所以让我们转换这段代码：
已安装(){
//选择初始化
这个。$ fetch(`/普及/帐户/列表/2 `)。然后(response={
if (response.errorCode==0) {
let data=response.data
this.accountList=data
this . detail . aid=this . account list[0]。id；//默认选择第一次初始化。
}
});
},
我们上面说了，后台获取的数据是分配给他的。如果是自己定义的数据，那就更简单了。然后
第3种，先贴自定义数据
top
Span广告有限模式：/span
选择v-mode= detail . mode
选项：value=0 select all /option
Option :value=1 每日限量广告/option
Option :value=2 无限广告/option
/选择
/p
这时我们可以将后端绑定的field mode的值设置为第一项的option的值，并在data中初始化。
data() {
返回{
详细信息：{
.
援助：0，
模式：0，
},
}
到目前为止，已经从前端和后端写好了如何将第一项设置为默认值。
vue select js 设置默认值
我用vue渲染这个地方，选择。
对于每个选项如下
div id=公司列表
标签公司/标签
select class= form-control id= companyid v-model=所选优惠券 @ change= getCompanyId($ event)
选项数据“v-bind:value=item”中的v-for=“( item，index)。id { { item。公司名称} }
/选项
/选择
/div
执行功能(公司。 getcompanylist ，{}，function(result) {
var vucom=new Vue({
埃尔： #公司名单，
数据：{
数据：[]
},
已创建(){
//默认值渲染必须
这个。所选优惠券=hcompanyid
},
方法：{
getCompanyId:函数（事件){
$(#companyid ).val(事件。目标。值)；
}
}
});
vucom。数据=结果。数据；
})
execFunc是我自己封装的一个创建交互式、快速动态网页应用的网页开发技术请求
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。