计算属性不会在只读输入上更新

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

注意：存储已正确更新，但未触发 getter。 没有只读他会被触发。

可能是使用只读的不正确方式吗？ 也试过这个而不是真/假。

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

Answer 1

在我看来，有一种更好的方法来处理您的文本字段值。使用 mapGetters + mapActions。将 getter 值与 :value=inputValue 一起使用。并通过您的操作在 blur 上提交此值。顺便说一句，请不要在 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
          }
    }
}