上一節已經完成了問卷的新增與刪除，現在只需要小小的改動就能實現一個修改功能。

1.進入修改頁面和直接新增用的是同一個元件，但是進去修改頁面需要把要修改的位置通過路由傳值。

this.$router.push({path: '/questionnaire/handle', query: {index: row}});

而不要傳值的直接進入新增頁面則只需要

 @click="$router.push('/questionnaire/handle')"

對應的路由配置也不要改變

{ path: '/questionnaire', component: Questionnaire },
{ path: '/questionnaire/details', component: QuestionnaireDetails },
{ path: '/questionnaire/handle', component: QuestionnaireHandle },
 

2.在進入QuestionnaireHandle.vue元件後需要判斷是新增還是修改：

  created() {
    this.index = this.$route.query.index;
    if(this.index >= 0) {
       let data = this.$store.state.questData[this.index];
       this.ruleFormChild = [];
       this.ruleForm.name = data.name;
       this.ruleFormChild = data.questList;
       this.titText = '修改問卷';
       this.submitText = '立即修改'
    }
  },
 

index 預設值應該為-1

3.提交結果也需要判斷一下

let couponDatas = {
    class: 'couponData',
    data: couponData,
    index: this.index,
}
if(this.index >= 0)  {
    couponDatas.type = 'handle';
}else {
    ouponDatas.type = 'add';
}
this.$store.commit('setData', couponDatas)
this.$router.push('/coupon')

這樣新增和修改就可以直接共用一個元件了。

4.前面我們只是實現了問卷的簡單新增還沒有為問卷中選擇題進行選項新增，這裡我們就來實現一下：

    <el-form-item label="問題選項" v-show="ruleForm.type != 3" class="option-answer">
                <div v-for="(tag,index) in dynamicTags" :key="index"  class="answer-tag">
                        {{ String.fromCharCode(index + 65)}}:&nbsp;
                        <el-input
                                class="input-new-tag"
                                v-if="tag.boole"
                                v-model="tag.tagValue"
                                ref="saveTagInput"
                                size="small"
                                @keyup.enter.native="handleTagInputConfirm(index,$event)"
                                @blur="isflag && handleTagInputConfirm(index,$event)"
                        >
                        </el-input>
                        <span v-else @click="showTagInput(index)">
                            <el-tag closable :disable-transitions="false" 
                                    @close="handleClose(index)">{{tag.tagValue}}</el-tag>
                        </span>
                </div>
                <el-input 
                    v-show="inputVisible" 
                    v-model="inputValue" 
                    ref="saveInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                    class="input-new-tag"></el-input>
                <el-button 
                    v-show="!inputVisible"
                    @click="showInput" 
                    icon="el-icon-circle-plus-outline" 
                    class="button-news-tag">新增選項</el-button>
    </el-form-item>

        showTagInput(index) {
            this.dynamicTags[index].boole = true;
            this.isflag = true;
            this.$nextTick(() => {
                this.$refs.saveTagInput[0].$refs.input.focus();
            });
        },
        handleClose(index) {
            this.dynamicTags.splice(index, 1);
            this.$emit("setAnswer", {
                type: 'detele',
                index: this.index,
                number: index
            });
        },
        handleTagInputConfirm(index,event) {
            if(event.type === 'keyup') {
                this.isflag = false;
            }
            this.dynamicTags[index].boole = false;
            if(this.dynamicTags[index].tagValue === '') {
                this.handleClose(index);
            }else {
                this.$emit("setAnswer", {
                    type: 'handle',
                    index: this.index,
                    number: index,
                    data: this.dynamicTags[index].tagValue
                });
            }
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(() => {
                this.$refs.saveInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            if(this.inputValue != '') {
                this.dynamicTags.push({
                    tagValue: this.inputValue,
                    boole: false
                });
                this.$emit("setAnswer", {
                    type: 'add',
                    index: this.index,
                    data: this.inputValue
                });
            }
            this.inputVisible = false;
            this.inputValue = '';
        },

這裡將修改父元件的資料全部來向父級元件觸發一個事件setAnswer:

    setAnswer(data) {
        let list = this.ruleFormChild[data.index].answerList ? 
        this.ruleFormChild[data.index].answerList : [];
        switch (data.type) {
            case 'add':
                list.push(data.data);
                break;
            case 'handle':
                list.splice(data.number, 1, data.data)
                break;
            case 'detele':
                list.splice(data.number, 1);
                break;
            default:
                console.log('此函式還未被定義！')
                break;
        }
    }

最終頁面顯示效果為：

這樣就實現了父子元件的相互通訊。