跨頁面?zhèn)鬟f與接收數(shù)組并賦值

為更好讓大家理解拿自己的項目做例子并附上動圖效果，可以看到將第一行數(shù)據(jù)選中的一行賦值到了另一個界面：為了更好讓大家理解拿去附用將我每個界面和方法屬性的命名都介紹給大家：

兄弟界面跳轉(zhuǎn)：question-edit——>add-question

1.界面A：question-edit

想要將本行的數(shù)據(jù)賦值過去，因為不是一個所以要用到數(shù)組，將它們打包好，首先第一步我們的入口在操作的編輯圖標上

1.編輯圖標代碼：

<template slot-scope="scope">
	<el-button @click="addQuestion(scope.row)" type="text" size="small" icon="el-icon-edit"></el-button>
</template>

點擊事件中的addQuestion是自己定義的界面跳轉(zhuǎn)方法。確定本行攜帶數(shù)據(jù)加入模板插槽后，在跳轉(zhuǎn)方法中加入(scope.row)

2.方法addQuestion

	addQuestion(row) {
	      this.carryCurrentRowCode = row;
	      this.$router.push({
	        path: "add-question",
	        //query: this.carryCurrentRowCode
	        query: {
	          carryCurrentRowCode: this.carryCurrentRowCode
	        }
	      });
    },

跳轉(zhuǎn)功能的實現(xiàn)主要是path: "add-question"起到的作用。

界面跳轉(zhuǎn)詳情可以了解詳細文章：http://m.fzitv.net/article/245670.htm

注意：注釋的一行不能實現(xiàn)，用下方帶括號的。

下方carryCurrentRowCode: this.carryCurrentRowCode

前邊的是接收界面用到的接收數(shù)組，我這里把他們名字命名一樣了，實際前后可以不同。

3.carryCurrentRowCod是定義的數(shù)組

	export default {
	  data() {
	    return {
		//點擊編輯 攜帶當前行的參數(shù)數(shù)組
		      carryCurrentRowCode: {
		        questionTypeId: "",
		        serial: "",
		        questionClassifyId: "",
		        questionContent: "",
		        degreeInitial: ""
		      },
}

數(shù)組中括號的是帶的組件的數(shù)據(jù)。括號里加自己想攜帶的數(shù)據(jù)。

2.界面B：add-question

1.拿過傳遞過來的數(shù)組

	export default {
	  data() {
	    return {
		// 傳遞過的數(shù)組
		      carryCurrentRowCode: {}
    }；

2.因為拿過來的數(shù)組是在界面一加載就顯示出來的，所以傳遞過來的數(shù)組方法和將值賦值到對應的組件中都要卸載鉤子函數(shù)中

	created() {
	    // 從question-edit界面接收到carryCurrentRowCode數(shù)組
	    this.carryCurrentRowCode = this.$route.query.carryCurrentRowCode;
    }

3.傳遞過來的數(shù)組是拿到了，具體將一個值賦值到組件中舉一個例子：用試題編號舉例serial: "",

		// 試題編號
    this.i_number = this.carryCurrentRowCode.serial;

同樣將賦值寫到鉤子函數(shù)中。

解釋i_number

是組件el-input試題編號v-model="i_number"

注意：

如果不是兄弟接收界面的命名命名好了，可以減少這個組件賦值步驟，直接在組件的v-model中等于接收數(shù)組點serial

數(shù)組賦值踩過的坑

最近需要在Vue當中完成動態(tài)賦值數(shù)組操作，從服務器拿到數(shù)據(jù)后，刷新數(shù)組中的數(shù)據(jù)，但是發(fā)現(xiàn)無論使用什么方法都不行，通過打log,發(fā)現(xiàn)數(shù)據(jù)在這里就無法向下執(zhí)行，而且也沒有報任何的異常，最終問題解決，在這里做個記錄。

Vue中的數(shù)組賦值和在普通的JS中賦值還是有所區(qū)別。

以下操作可以引起界面刷新：push，pop ，unshift，shift，reverse，sort，splice

以下操作不會引起界面刷新：slice，concat ，filter

還有一點需要注意：

如果通過直接賦值或者改變長度是無法讓界面刷新的。

（1）通過索引直接設置項。

（2）修改數(shù)組長度，mylist.length=3

第二點，在從服務器中獲取數(shù)據(jù)后賦值需要注意一個問題：主體對象的改變。

比如在使用axios對象發(fā)起請求后，在返回方法中處理數(shù)據(jù)需要注意：

注意在axios的then方法中調(diào)用對象時，不能使用this對象，因為此時this對象指的是axios實例，所以通過this是獲取不到vue實例中的data數(shù)據(jù)的，必須在外界使用一個值來指向vue實例對象，通過這個外部對象來賦值，才是正確的。

var self;
created:function(){
self = this;
},
mouted:function(){ ? ? ? ?
axios.create({
? ? ? ? baseURL: 'url',
? ? ? ? timeout: 10000,
? ? ? ? headers: { 'Content-Type': 'application/json' }
? ? ? }).get('xxxxxxxxxx')
? ? ? ? ? .then(function(response){
? ? ? ? ? ? if(response.data.dataList.length>0){
? ? ? ? ? ? ? var datalist = response.data.dataList;
? ? ? ? ? ? ? for(var i=0;i<datalist.length;i++){
? ? ? ? ? ? ? ? self.DeviceTypeList.push({devicetype:datalist[i].name});
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? ? .catch(function(error){
? ? ? ? ? ? console.log(JSON.stringify(error));
? ? ? ? ? });
}

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論