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 () {
  }

編輯