我正在尝试创建一个输入,将用户按下的键转换为最后一个大写字符(如果用户键入 'a' -> 'A', 'abc' -> 'C')。< /p>
这是我的代码:
<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,但这也不起作用。
关于如何实现这种行为的任何想法。
答案 0 :(得分:0)
您不应该使用突变,因为它是同步的。由于 DOM 处理更新的方式,您应该使用 vuex 操作。如果你把它作为一个动作,我认为它可能会工作得很好。
如果它不起作用,可以同时尝试:await this.$nextTick()
和 action
(按此顺序)。