在 vue material 芯片中限制字符串长度

Question

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

他们有 md-limit 道具，它限制了我可以在数组中包含的字符串数量，但不限制我可以在每个字符串中包含的字符数量。

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

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

Answer 1

所以如果我做对了

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

我会做什么：

做一个深度观察（也许正常工作就好）

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
  }
}

尝试使用组件的格式化函数作为验证检查 md-format and return null if more than 30 chars

在 vue material 芯片中限制字符串长度

Limit string length in vue material chips

javascript

vue.js

vue-material