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

2024年1月7日

環境
vue 3.0.0
node v14.15.1
yarn 1.22.4
@vue/cli 4.5.9

構文

watch: {
  str: function(newVal) {
    this.str = 処理コード
  }
}

watchを使用して、入力値を監視して制限を行います

使用例

<template>
  <div class="sss">    
    <input type="text" v-model="str">    
  </div>
</template>

<script>
export default {
  name: 'StudySkill',
  props: {
    msg: String
  },
  data() {
    return {
      str: ""
    };
  },
  watch: {
    str: function(newVal) {
      this.str = newVal.length > 5 ? newVal.slice(0, -1) : newVal;
    }
  }
}
</script>