vue日志之如何用select選中默認值
如何用select選中默認值
在寫這個問題之前也查閱了網上很多種答案，下面我來說一下幾種不可行的方式以及可行的方式。
干貨來了。
先貼一下view和model
? ? ?<div class="item">
? ? ? ? <p class="top">
? ? ? ? ? <span>推廣物：</span>
? ? ? ? ? <select v-model="detail.aid">
? ? ? ? ? ? <option :value="item.id" v-for="item in accountList" :key="item.id">{{item.name}}</option>
? ? ? ? ? </select>
? ? ? ? </p>
? ? ? ? <h6 class="bottom">選擇推廣任務的公眾號</h6>
? ? ? </div>? 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,沒有操作數(shù)據(jù)，selectIndex是可以打印出來的。但是在vue中并沒有作用。
第2種
? created () {
? ? // select初始化
?
? ? this.detail.aid = this.accountList[0].id; //默認選中第一項
?
? },有人把這個id初始化放在mounted, 也有人放在created其實并沒有太大的區(qū)別，created時就可以獲取的到后端傳來的數(shù)據(jù)了。所以這里你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)一下，會發(fā)現(xiàn)它是空數(shù)組，有人說我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; //默認選中第一項 初始化
? ? ? }
? ? });
? },上面我們說過了從后臺拿到的數(shù)據(jù)給他賦值，如果是我們自己定義的數(shù)據(jù)呢，那就更簡單了。接下來
第3種，先貼自定義數(shù)據(jù)
? ? ? ? <p class="top"> ? ? ? ? ? <span>廣告限量模式：</span> ? ? ? ? ? <select v-model="detail.mode"> ? ? ? ? ? ? <option :value="0">全選</option> ? ? ? ? ? ? <option :value="1">每日限量廣告</option> ? ? ? ? ? ? <option :value="2">不限量廣告</option> ? ? ? ? ? </select> ? ? ? ? </p>
這個時候我們把后端綁定的字段mode的值設置為第一項的option的value就行，在data中初始化就可以了。
? data() {
? ? return {
? ? ? detail: {
? ? ? ? ...
? ? ? ? aid: 0,
? ? ? ? mode: 0,
? ? ? },
? }到此已寫清了從前端和后端怎樣設置第一項為默認值。
vue select js 設置默認值
這個地方我是用vue進行渲染的select
對于每個選項如下
<div id="companylist">
<label>所屬公司</label>
<select class="form-control" id="companyid" v-model="couponSelected" @change='getCompanyId($event)'>
<option v-for="(item,index) in data" v-bind:value=item.id>{{item.companyname}}
</option>
</select>
</div>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請求
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue插件使用方法詳情分享，使用插件之前顯示定義，下文通過js插件定義展開詳細文章介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-03-03
vue3 座位選座矩陣布局的實現(xiàn)方法(可點擊選中拖拽調換位置)
由于公司項目需求需要做一個線上設置考場相關的座位布局用于給學生考機排號考試,實現(xiàn)教室考場座位布局的矩陣布局,可點擊選中標記是否有座無座拖拽調換位置橫向縱向排列,本文給大家分享實現(xiàn)代碼,一起看看吧2023-11-11
這篇文章主要介紹了vuex的mapGetters無效原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3實現(xiàn)模擬地圖站點名稱按需顯示的功能(車輛模擬地圖)
最近在做車輛模擬地圖,在實現(xiàn)控制站點名稱按需顯示,下面通過本文給大家分享vue3實現(xiàn)模擬地圖站點名稱按需顯示的功能,感興趣的朋友跟隨小編一起看看吧2024-06-06
vue3+ts實際開發(fā)中該如何優(yōu)雅書寫vue3語法
近嘗試上手 Vue3+TS+Vite,所以下面這篇文章主要給大家介紹了關于vue3+ts實際開發(fā)中該如何優(yōu)雅書寫vue3語法的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了如何使用 Vue.js 和純 JavaScript 構建 Bootstrap 組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
解決vue2.0路由跳轉未匹配相應用路由避免出現(xiàn)空白頁面的問題
今天小編就為大家分享一篇解決vue2.0路由跳轉未匹配相應用路由避免出現(xiàn)空白頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue移動端右滑屏幕返回上一頁，本文結合實例給大家介紹的非常詳細，并附有源碼下載,需要的朋友可以參考下2019-06-06
本篇文章給大家分享了Vue2.0仿餓了么webapp單頁面應用詳細步驟，有興趣的朋友可以跟著操作下。2018-07-07
富文本編輯器quill.js?開發(fā)之自定義插件示例詳解
這篇文章主要為大家介紹了富文本編輯器quill.js?開發(fā)之自定義插件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08