Вычисляемое свойство не обновляется при вводе только для чтения

Question

У меня есть поле ввода, которое по умолчанию установлено только для чтения, и когда вы нажимаете кнопку, можно редактировать элемент.

Без поля только для чтения, кажется, что поле обновляется правильно.

Без него я редактирую элемент, и когда фокус теряется, он возвращается к тексту, который был ранее.

<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});
    }
  }
}

Примечание: хранилище обновлено правильно, но геттер не запущен. Без чтения он срабатывает.

Может ли быть неправильный способ использования только для чтения? Также попробовал это вместо true / false.

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

Answer 1

На мой взгляд, есть лучший способ обработать значение вашего текстового поля. Используйте mapGetters + mapActions. Используйте значение получателя с :value=inputValue. И передайте это значение размытию через ваши действия. Кстати, пожалуйста, не изменяйте свои данные в HTML-шаблон (edit = false). :readonly отлично работает с true/false. Или вы могли бы использовать наблюдателя. Что-то вроде этого:

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
          }
    }
}