限制Vue材料芯片中的字符串长度

Question

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

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

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

如果有人建议我如何实现它，将不胜感激！天呐

Answer 1

如果我做对了

1. 您的芯片内部有一个阵列（例如： this.fruits = ['Banana','Apple','Pineapple','SomeOtherFruitWithMoreThan30Chars'])
2. 当您按 Enter 键时，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
  }
}

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