限制vue材料碎片中的字符串长度

Question

我正在使用Vue Material Chips组件来收集一些字符串数组，并且我必须限制每个字符串的长度(比如说，30个字符(。

它们有md-limit属性，它限制了我在数组中可以拥有的字符串数量，但不限制我在每个字符串上可以拥有的字符数量。

我确实相信，在将每个字符串添加到数组之前，我必须建立一个自定义验证(我曾尝试使用v-validate，但它似乎对芯片组件没有任何影响(。

如果有人给我一个如何实现的建议，我将不胜感激！Tnx

Answer 1

所以如果我得到了正确的

1. 你有一个里面有芯片的阵列(例如：this.fruits = ['Banana','Apple','Pineapple','SomeOtherFruitWithMoreThan30Chars'](
2. 当您点击回车键时，v-model变量会得到更新，并将您的输入推送到该数组中

我会做什么：

1. 做一块深表(也许正常工作很好(

watch: {
fruits:{
// newVal is the new value of the array
handler: function(newVal) {
//checks if the last element of the array has more than 30 chars
if(newVal[(newVal.length - 1)].length > 30){
//remove the last element of the array
this.fruits.pop()
}
},
deep: true
}
}

2. 尝试使用组件的格式化程序函数作为验证检查md格式，如果超过30个字符，则返回null