CODEWITHSUNDEEP
vue.jsvuex
Dannz
Dannz

Reputation: 495

Computed property doesn't update on readonly input

I have an input field which by default set to readonly and when you click a button it should be possible to edit the item.

Without the readonly field, it seems that the field updates correctly.

Without it, I edit the item and when the focus is lost it reverts to the text that was previously.

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

Note: the store is updated correctly but the getter is not triggered. Without the readonly he is triggered.

Could it be the incorrect way to use readonly? Also tried this instead of true/false.

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

Upvotes: 2

Views: 7958

Answers (1)

Sergey Shapirenko
Sergey Shapirenko

Reputation: 165

In my opinion, there is a better way to handle your textfield value. Use mapGetters + mapActions. Use getter value with :value=inputValue. And commit this value on blur via your action. Btw, pls dont change your data inside html template (edit = false). :readonly works fine with true/false. Or you could use watcher. 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
          }
    }
}

Upvotes: 2

Related Questions