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

更新時間：2020年06月22日 10:21:46 作者：～Phoenix

這篇文章主要介紹了Vue-循環(huán)遍歷選項賦值到對應(yīng)控件的實現(xiàn)方法啊，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

老規(guī)矩：先走流程，上動圖看效果！在此推薦個大佬，為我提供解決思路，大家多多訪問他的博客，希望帶給大家?guī)椭?/p>

https://blog.csdn.net/yyp0304Devin

下面就一步步為大家講解如何實現(xiàn)將它的試題選項賦值到對應(yīng)的控件中的，因為題型較多，拿單選題型為大家演示：不同題型它的界面也是不同的，這里也有個技術(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文件中寫好代理路由，因為是新的接口，讓我在訪問路徑時忘了寫，明明獲取到了ID，就是報404，疑惑了好半天，所以一定不要忘記寫好代理！

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

三、循環(huán)遍歷data數(shù)組，將不同試題內(nèi)容賦值到對應(yīng)控件

由Swagger測試接口可以看出，給我們的返回數(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ū)分不同的試題選項，之后再做判斷賦值到相應(yīng)的控件就好了

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;
            }
          }

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

到此這篇關(guān)于Vue循環(huán)遍歷選項賦值到對應(yīng)控件的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)Vue循環(huán)遍歷選項賦值到對應(yīng)控件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: