如何实现el-form-item里的循环项在没有点击确认前不同步在页面上

Question

el-form-item里的循环条件每次编辑操作时都会同步展示在页面上（在没有点击保存的情况下），而且点击取消按钮后还会展示在页面上，如何实现点击确认才展示

代码如下

<template>
  <div>
    <el-table :data="tableData">
        <el-table-column label="tags" prop="tags">
            <template slot-scope="scope">
                <el-tag v-for="item in scope.row.tags" :key="item.index">{{ item.key + item.value }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="handleUpdate(scope.row)">操作</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog title="title" :visible.sync="open">
        <el-form :model="form" ref="form">
            <el-form-item label="tags" prop="tags">
                <el-button @click="addInput">添加</el-button>
                <div v-for="(item,index) in form.tags" :key="index">
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <el-input v-model="item.key" placeholder="请输入key"></el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-input v-model="item.value" placeholder="请输入value"></el-input>
                        </el-col>
                        <el-col :span="7" style="float: right">
                            <el-button @click="removeInput(index)">删除</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="submitForm">确认</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data(){
        return{
            open:false,
            form:{},
            input1:'',
            input2:'',
            tableData:[
                {
                    tags:[
                        {key:'cpu',value:''}
                    ]
                },
                {
                    tags:[]
                }
            ]
        }
    },
    methods:{
        addInput() {
            this.form.tags.push({key:'',value:''})
        },
        removeInput(index) {
            this.form.tags.splice(index, 1); 
        },
        handleUpdate(row){
            this.open = true
            this.form = {...row}
            console.log(this.form)
        },
        submitForm(){
            console.log(this.form)
        }
    }
}
</script>

Answer 1

数据绑定用v-bind单向绑定；只有在赋值后才会在输入框内显示出来