Question

当值大于限制长度时，我想对输入值进行切片。

我当然知道在输入字段中有maxlength属性，但是我想在长度超过限制时显示警报弹出窗口。当我将maxlength设置为希望用户键入时，没有调用弹出窗口显示功能。

<template>
    <input type="text" v-model="title">
</template>

<script>
    export default {
        data() {
            return { MAX_LENGTH: 10 };
        },
        computed: {
            title: {
                get() { return this.$store.getters.title; },
                set(title) {
                    if (title.length > this.MAX_LENGTH) {
                        alert('Too long!!');
                        // This part doesn't work as I wanted
                        this.$store.commit('updateTitle', title.slice(0, this.MAX_LENGTH);
                    } else {
                        this.$store.commit('updateTitle', title);
                    }
                }
            }
        }
    }
</script>

所有其他部分都起作用，但标题长度超过10时，状态会更新，而输入字段不会更改。

Answer 1

我找到了解决方法。

为什么title不更新，当我对字符串进行切片时，无论如何title仍然保持不变。

vm.$forceUpdate在这种情况下有效。

Vuex状态已更新，但使用v模型时输入值未更新

1 个答案: