老規矩：先走流程，上動圖看效果！在此推薦個大佬，為我提供解決思路，大家多多訪問他的部落格，希望帶給大家幫助

https://blog.csdn.net/yyp0304Devin

下面就一步步為大家講解如何實現將它的試題選項賦值到對應的控制元件中的，因為題型較多，拿單選題型為大家演示：不同題型它的介面也是不同的，這裡也有個技術點，這裡就先不講解了。

如動圖所示，要完成這樣的功能，肯定是要訪問後端介面的

知道URL後，我們就知道攜帶的試題ID過去

一、傳遞ID

在點選編輯按鈕事件中將ID傳值過去

<el-button
	@click="editQuestion(scope.row)"
	type="text"
	size="small"
	icon="el-icon-edit"
	></el-button>
	
	// 攜帶的題型ID
	carryCurrentRowCode:[
	{id:""}
	],// 通過點選按鈕將ID傳值到add-question介面
	editQuestion(row){
	this.carryCurrentRowCode=row;
	this.$router.push({
	path:"add-question",query:{
	carryCurrentRowCode:this.carryCurrentRowCode
	}
	});
	},

二、在鉤子函式中通過路由接收ID

this.$axios
	.get("/option/queryById/" + this.carryCurrentRowCode.id)
	.then(res => {   
});

在Vue.js檔案中寫好代理路由，因為是新的介面，讓我在訪問路徑時忘了寫，明明獲取到了ID，就是報404，疑惑了好半天，所以一定不要忘記寫好代理！

proxy: {  
	'/option': {
  target: 'http://localhost:8013'
  },}

三、迴圈遍歷data陣列，將不同試題內容賦值到對應控制元件

由Swagger測試介面可以看出，給我們的返回資料得到的是這樣一個數組，如何將對應的試題內容賦值到相應的控制元件中，就要用到for迴圈了

傳統for迴圈用法：

String[]arr={"amy","heinrich","cindy","git"};
	
	for(inti=0;i<arr.length;i++){
	System.out.println(arr[i]);
}

列印臺：

amy

heinrich

cindy

git

for迴圈可以獲取到它的optionOrder,以此來區分不同的試題選項，之後再做判斷賦值到相應的控制元件就好了

for(vari=0;i<res.data.data.length;i++){
//選項A輸入框+富文字編輯器
if(res.data.data[i].optionOrder==1){
this.IA_inputw=res.data.data[0].optionName;
this.FA_input=res.data.data[0].optionName;
}elseif(res.data.data[i].optionOrder==2){
//選項B輸入框+富文字編輯器
this.IB_inputw=res.data.data[1].optionName;
this.FB_input=res.data.data[1].optionName;
}elseif(res.data.data[i].optionOrder==3){
//選項C輸入框+富文字編輯器
this.IC_inputw=res.data.data[2].optionName;
this.FC_input=res.data.data[2].optionName;
}elseif(res.data.data[i].optionOrder==4){
//選項D輸入框+富文字編輯器
this.ID_inputw=res.data.data[3].optionName;
this.FD_input=res.data.data[3].optionName;
}
}

功能實現，多選、判斷等不同型別的試題都可以使用這個方法實現賦值。

到此這篇關於Vue迴圈遍歷選項賦值到對應控制元件的實現方法的文章就介紹到這了,更多相關Vue迴圈遍歷選項賦值到對應控制元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！