vue.jsのinput文字数制限について

表題の通り、制限をかけるコードを書いています。

qiitaの記事を参考にしてhttps://teratail.com/questions/input#作成していますが、動きません。
どなたか間違いをご指摘頂けますでしょうか？
よろしくお願い致します。


<!-- input部分 -->
<label for="numberLabel" class="form-label">Number</label>
<input type="number" class="form-control" id="numberLabel" v-model="formData.number">


----------

<!-- script部分 -->


watch: {
  number(arg) {
    this.formData.number = this.numberLimit(arg);
  }
},

methods: {
  numberLimit(arg){
    return arg.length > 16 ? arg.slice(0, -1) : arg;
  }
}

参考にした記事の引数などが全てinputTextと同名の為、どこがどうつながっているのか、わかっていない節もあります、、、

行動規範の内容に同意します

回答1件

ベストアンサー

監視する必要があるのはformData.numberなのに対してnumberを監視しているのが原因です。
また、Watchは通常では配列、オブジェクトを監視しません。
配列を監視させるためにはDeep:trueを追加してください。

Vue
1watch: {
2  formData:{
3    handler:function(arg){
4    this.formData.number = this.numberLimit(arg.number);
5    },
6    deep:true
7  }
8},
9
10methods: {
11  numberLimit(arg){
12    return arg.length > 16 ? arg.slice(0, -1) : arg;
13  }
14}