Vue循環(huán)遍歷選項(xiàng)賦值到對應(yīng)控件的實(shí)現(xiàn)方法
老規(guī)矩:先走流程,上動圖看效果!在此推薦個大佬,為我提供解決思路,大家多多訪問他的博客,希望帶給大家?guī)椭?/p>
https://blog.csdn.net/yyp0304Devin
下面就一步步為大家講解如何實(shí)現(xiàn)將它的試題選項(xiàng)賦值到對應(yīng)的控件中的,因?yàn)轭}型較多,拿單選題型為大家演示:不同題型它的界面也是不同的,這里也有個技術(shù)點(diǎn),這里就先不講解了。
如動圖所示,要完成這樣的功能,肯定是要訪問后端接口的
知道URL后,我們就知道攜帶的試題ID過去
一、傳遞ID
在點(diǎn)擊編輯按鈕事件中將ID傳值過去
<el-button @click="editQuestion(scope.row)" type="text" size="small" icon="el-icon-edit" ></el-button> // 攜帶的題型ID carryCurrentRowCode: [ { id: "" } ], // 通過點(diǎn)擊按鈕將ID傳值到add-question界面 editQuestion(row) { this.carryCurrentRowCode = row; this.$router.push({ path: "add-question", query: { carryCurrentRowCode: this.carryCurrentRowCode } }); },
二、在鉤子函數(shù)中通過路由接收ID
this.$axios .get("/option/queryById/" + this.carryCurrentRowCode.id) .then(res => { });
在Vue.js文件中寫好代理路由,因?yàn)槭切碌慕涌冢屛以谠L問路徑時忘了寫,明明獲取到了ID,就是報(bào)404,疑惑了好半天,所以一定不要忘記寫好代理!
proxy: { '/option': { target: 'http://localhost:8013' }, }
三、循環(huán)遍歷data數(shù)組,將不同試題內(nèi)容賦值到對應(yīng)控件
由Swagger測試接口可以看出,給我們的返回?cái)?shù)據(jù)得到的是這樣一個數(shù)組,如何將對應(yīng)的試題內(nèi)容賦值到相應(yīng)的控件中,就要用到for循環(huán)了
傳統(tǒng)for循環(huán)用法:
String[] arr = { "amy", "heinrich", "cindy", "git" }; for (int i = 0; i < arr.length; i++) { System.out.println(arr[i]); }
打印臺:
amy
heinrich
cindy
git
for循環(huán)可以獲取到它的optionOrder,以此來區(qū)分不同的試題選項(xiàng),之后再做判斷賦值到相應(yīng)的控件就好了
for (var i = 0; i < res.data.data.length; i++) { // 選項(xiàng)A輸入框+富文本編輯器 if (res.data.data[i].optionOrder == 1) { this.IA_inputw = res.data.data[0].optionName; this.FA_input = res.data.data[0].optionName; } else if (res.data.data[i].optionOrder == 2) { //選項(xiàng)B輸入框+富文本編輯器 this.IB_inputw = res.data.data[1].optionName; this.FB_input = res.data.data[1].optionName; } else if (res.data.data[i].optionOrder == 3) { //選項(xiàng)C輸入框+富文本編輯器 this.IC_inputw = res.data.data[2].optionName; this.FC_input = res.data.data[2].optionName; } else if (res.data.data[i].optionOrder == 4) { //選項(xiàng)D輸入框+富文本編輯器 this.ID_inputw = res.data.data[3].optionName; this.FD_input = res.data.data[3].optionName; } }
功能實(shí)現(xiàn),多選、判斷等不同類型的試題都可以使用這個方法實(shí)現(xiàn)賦值。
到此這篇關(guān)于Vue循環(huán)遍歷選項(xiàng)賦值到對應(yīng)控件的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue循環(huán)遍歷選項(xiàng)賦值到對應(yīng)控件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
element表格el-table實(shí)現(xiàn)虛擬滾動解決卡頓問題
當(dāng)頁面數(shù)據(jù)過多,前端渲染大量的DOM時,會造成頁面卡死問題,本文主要介紹了element表格el-table實(shí)現(xiàn)虛擬滾動解決卡頓問題,具有一定的參考價值,感興趣的可以了解一下2023-10-10如何使用sm4js進(jìn)行加密和國密sm4總結(jié)
近期由于公司項(xiàng)目的需要開始研究國密SM4加密,下面這篇文章主要給大家介紹了關(guān)于如何使用sm4js進(jìn)行加密和國密sm4的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04Vue3中watchEffect和watch的基礎(chǔ)應(yīng)用詳解
watch是一個偵聽器,默認(rèn)是懶偵聽的,即僅在偵聽源發(fā)生變化時才執(zhí)行回調(diào)函數(shù),watchEffect是會自動收集函數(shù)里面變量的響應(yīng)式依賴,本文主要來講講二者的區(qū)別,感興趣的可以了解一下2023-07-07vue動態(tài)路由加載時出現(xiàn)Cannot?find?module?xxx問題
這篇文章主要介紹了vue動態(tài)路由加載時出現(xiàn)Cannot?find?module?xxx問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01如何解決前端上傳Formdata中的file為[object?Object]的問題
文件上傳是Web開發(fā)中常見的功能之一,下面這篇文章主要給大家介紹了關(guān)于如何解決前端上傳Formdata中的file為[object?Object]問題的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07Vue使用watch監(jiān)聽一個對象中的屬性的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue使用watch監(jiān)聽一個對象中的屬性的實(shí)現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05vue+canvas實(shí)現(xiàn)炫酷時鐘效果的倒計(jì)時插件(已發(fā)布到npm的vue2插件,開箱即用)
這篇文章主要介紹了vue+canvas實(shí)現(xiàn)炫酷時鐘效果的倒計(jì)時插件(已發(fā)布到npm的vue2插件,開箱即用) ,需要的朋友可以參考下2018-11-11解決vue?eslint開發(fā)嚴(yán)格模式警告錯誤的問題
這篇文章主要介紹了解決vue?eslint開發(fā)嚴(yán)格模式警告錯誤的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue淺析axios二次封裝與節(jié)流及防抖的實(shí)現(xiàn)
axios是基于promise的HTTP庫,可以使用在瀏覽器和node.js中,它不是vue的第三方插件,vue-axios是axios集成到Vue.js的小包裝器,可以像插件一樣安裝使用:Vue.use(VueAxios,?axios),本文給大家介紹axios的二次封裝和節(jié)流與防抖2022-08-08