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与getter值一起使用。并通过您的操作在模糊时提交此值。顺便说一句，请不要在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
          }
    }
}

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

1 个答案: