vue 设置 input 为不可以编辑

我用最笨的方法，先实现功能先,用两个input,一个可以编辑，一个不可以编辑，失去焦点后隐藏可以点击的那个，点“编辑”时，显示可以编辑的那个input

          <div class="edit-item">
            <input type="text" id="group-name" v-model="groupName" class="edit-input" disabled v-show="!isEditGroupName" >
            <input type="text" id="group-name2" v-model="groupName" class="edit-input" ref="groupName"
            @input="changeValue"
            @change="editGroupNameSave(groupInfo.name)" v-show="isEditGroupName" @blur="isEditGroupName = false">
            <span  @click="editGroupName"><icon-svg name="icon-kaka-compile" icon-style="edit-ico"></icon-svg></span>
          </div>

  export default {
    name: 'RightSideBar',
    props: {
    },
    data () {
      return {
        isEditGroupName: false, // 修改群名称
      }
    },
    computed: {
      // 群名称
      groupName: {
        get () {
          return this.$store.getters.groupSetInfo.name
        },
        set (val) {
          // 使用vuex中的mutations中定义好的方法来改变
          let groupSetInfo = this.$store.getters.groupSetInfo
          let copyMyinfo = Object.assign({}, groupSetInfo)
          copyMyinfo.name = val
          this.$store.dispatch('groupSetInfo', copyMyinfo)
        }
      },
    },
    methods: {
      changeValue () {
        let leng = this.validateTextLength(this.groupName)
        if (leng >= 15) {
          this.$refs.groupName.maxLength = leng
        } else {
          this.$refs.groupName.maxLength = 30
        }
      },
      validateTextLength (value) {
        // 中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算
        let cnReg = /([u4e00-u9fa5]|[u3000-u303F]|[uFF00-uFF60])/g
        let mat = value.match(cnReg)
        let length
        if (mat) {
          length = (mat.length + (value.length - mat.length) * 0.5)
          return length
        } else {
          return value.length * 0.5
        }
      },
      // 打开编辑
      editGroupName () {
        this.isEditGroupName = true
        let nickNameInput = document.querySelector('#group-name2')
        setTimeout(() => {
          nickNameInput.focus()
        }, 0)
      },
      // 保存群名修改
      editGroupNameSave (data) {

      },

    },
    created () {
  }

编辑