vue 点击标签 修改 当标签的值

点击事件

  <span class="txtUnderline editare" @click="editare('ContactAddr')">{{ formFields1.ContactAddr }}</span>
          联系人：
          <span class="txtUnderline editare" @click="editare('Contact')">{{ formFields1.Contact }}</span>
     联系电话：
        <span class="txtUnderline editare" @click="editare('ContactPhone')">{{ formFields1.ContactPhone }}</span>


    <!-- 弹框 -->
          <el-dialog
            title="修改"
            :visible.sync="centerDialogVisible"
            width="30%"
            center
            style="z-index: 999"
            :modal="false"
            :lock-scroll="true"
            top="30vh"
          >
            <span
              ><el-input
                v-model="iptFieldtxt"
                placeholder="输入修改的内容"
              ></el-input
            ></span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="queding()">确 定</el-button>
            </span>
          </el-dialog>

在methods中写

      //标签点击事件
    editare(field){
      //储存了 传过来的字段名称
        this.currentField = field;
     //储存了 传过来的字段名称的值
        this.iptFieldtxt = this.formFields1[field];
        this.centerDialogVisible=true;
    },
    // 点击确定
    queding(){
         this.formFields1[this.currentField] = this.iptFieldtxt;
         this.centerDialogVisible=false;
         this.currentField="";
         this.iptFieldtxt="";
    }

在data()中写

     iptFieldtxt:'',   //存储当前值
      currentField:''   //存储当前字段