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

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

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

1.界面A：question-edit

想要將本行的數(shù)據(jù)賦值過去，因?yàn)椴皇且粋€(gè)所以要用到數(shù)組，將它們打包好，首先第一步我們的入口在操作的編輯圖標(biāo)上

1.編輯圖標(biāo)代碼：

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

點(diǎn)擊事件中的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)功能的實(shí)現(xiàn)主要是path: "add-question"起到的作用。

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

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

下方carryCurrentRowCode: this.carryCurrentRowCode

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

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

	export default {
	  data() {
	    return {
		//點(diǎn)擊編輯 攜帶當(dāng)前行的參數(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.因?yàn)槟眠^來的數(shù)組是在界面一加載就顯示出來的，所以傳遞過來的數(shù)組方法和將值賦值到對應(yīng)的組件中都要卸載鉤子函數(shù)中

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

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

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

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

解釋i_number

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

注意：

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

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

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

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

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

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

還有一點(diǎn)需要注意：

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

（1）通過索引直接設(shè)置項(xiàng)。

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

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

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

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

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

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

最新評論