Vue-循環遍歷選項賦值到對應控件

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

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 (int i = 0; i < arr.length; i++) {
	          System.out.println(arr[i]);
}

打印臺：

amy

heinrich

cindy

git

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

for (var i = 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;
            } else if (res.data.data[i].optionOrder == 2) {
              //選項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) {
              //選項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) {
              //選項D輸入框+富文本編輯器
              this.ID_inputw = res.data.data[3].optionName;
              this.FD_input = res.data.data[3].optionName;
            }
          }

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