계산된 속성이 읽기 전용 입력에서 업데이트되지 않음

계산된 속성이 읽기 전용 입력에서 업데이트되지 않음

기본적으로 읽기 전용으로 설정된 입력 필드가 있으며, 버튼을 클릭하면 항목 편집이 가능해야 한다.

읽기 전용 필드가 없으면 필드가 올바르게 업데이트되는 것 같다.

그것이 없으면, 나는 항목을 편집하고 포커스가 없어지면 그것은 이전의 텍스트로 되돌아간다.

<template>
  <input ref="input"
         :readonly="!edit"
         type="text"
         v-model="inputValue"
         @blur="edit = false">
  <button @click="editItem"/>
</template>

data(){
  return {
    edit: false,
  }
}
methods: {
  ...mapMutations(['setKey']),
  editItem() {
    this.edit = true;
    this.$nextTick( () => this.$refs.input.focus() );
  }
}
computed: {
  ...mapGetters(['getKey']),
  inputValue: {
    get() {
      return this.getKey();
    }
    set(value) {
      this.setKey({value});
    }
  }
}

참고: 스토어가 올바르게 업데이트되었지만 게터가 트리거되지 않음.읽기 전용이 없으면 그는 유발된다.

읽기 전용을 사용하는 잘못된 방법일 수 있는가?또한 진실/거짓 대신 이것을 시도했다.

:readonly="edit ? null : 'readonly'"

내 생각에, 당신의 텍스트 필드 가치를 처리하는 더 좋은 방법이 있다.mapGetters + mapActions를 사용하십시오.다음에서 getter 값:value=inputValue. 그리고 당신의 행동을 통해 흐릿하게 이 가치를 커밋하십시오.btw, html 템플릿 내에서 데이터를 변경하지 마십시오.edit = false).:readonly와 잘 어울리다true/false아니면 감시자를 쓸 수도 있지smth like this:

v-model="inputValue",
@blur="toggleEgit"

...
data () {
    return {
        inputValue: this.getKey
    }
},

methods: {
    toggleEgit () {
        this.isEdit = !this.isEdit;
    }
},

watch: {
    inputValue: {
          handler: function (value) {
              this.$commit('setKey', value) // or whatever you want to update your store
          }
    }
}

참조URL: https://stackoverflow.com/questions/56033469/computed-property-doesnt-update-on-readonly-input