Vue.js フォームに入力文字数制限をかける

Vue.jsで、フォームに入力文字数制限をかける手順を記述してます。
環境
- OS CentOS Stream release 8
- vue 3.0.0
- node v14.15.1
- yarn 1.22.4
- @vue/cli 4.5.9
入力文字数制限
以下のコードのようにwatchを使用して、値を監視して制限を行います。
※ここでは3文字に制限してます
<template>
<div class="hello">
<input type="text" v-model="str">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
str: ""
};
},
watch: {
str: function(newVal) {
this.str = newVal.length > 3 ? newVal.slice(0, -1) : newVal;
}
}
}
</script>
実行結果

-
前の記事
ECCUBE4 エラー「Fatal error: require(): Failed opening required 「public_html/var/cache/prod/」が発生した場合 2021.04.23
-
次の記事
AlmaLinux firewallの設定 2021.04.23
コメントを書く