欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue循環(huán)遍歷選項(xiàng)賦值到對應(yīng)控件的實(shí)現(xiàn)方法

 更新時間:2020年06月22日 10:21:46   作者:~Phoenix  
這篇文章主要介紹了Vue-循環(huán)遍歷選項(xiàng)賦值到對應(yīng)控件的實(shí)現(xiàn)方法啊,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

老規(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)文章

最新評論