Nuxt / Vue 2 更改后覆盖输入值

Question

我正在尝试创建一个输入，将用户按下的键转换为最后一个大写字符（如果用户键入 'a' -> 'A'、'abc' -> 'C'）。

这是我的代码：

<template>
  <b-form-input
    ref="firstNameInitial"
    v-model="firstNameInitial"
  />
</template>

<script>
export default {
  firstNameInitial: {
    get () {
      return this.$store.state.certificateAdd.firstNameInitial
    },
    async set (val) {
      const newValue = StringUtils.convertToNameInitial(val)
      this.$store.commit('certificateAdd/setFirstNameInitial', newValue)

      // Tried this as well
      this.$refs.firstNameInitial.$el.value = newValue
    }
  }
}
</script>

如果我输入不同的字母，这会很好，但如果我输入“aa”，输入将显示“Aa”，因为不会重新计算 getter（vuex 仍然保存相同的数据：“A”）。

即使我通过引用一些在 setter 中递增的虚拟本地数据来欺骗 getter，组件也不会重新渲染，因为 value 属性没有更改；但即使 Vue 没有介入更改，下划线 HTML 输入的值也会始终更新。

我什至尝试过直接操作 DOM，但这也不起作用。

关于如何实现此行为的任何想法。

Answer 1

您不应该使用突变，因为它是同步的。由于 DOM 处理更新的方式，您应该使用 vuex 操作。如果你把它作为一个动作，我认为它可能会很好。

如果它不起作用，可以同时尝试：await this.$nextTick() 和 action（按此顺序）。