Restrict the character count in Vue Material chips

Question

Restrict the character count in Vue Material chips

Currently, I am utilizing the Vue Material Chips component to gather string arrays. My goal is to limit the character length of each string within the array to 30 characters.

The component offers a md-limit prop which restricts the number of strings in the array but does not control the character count per string.

It seems like implementing a custom validation before adding each string to the array will be necessary since using v-validate did not yield the desired effect on the chips component.

If anyone has any suggestions on how I can accomplish this, it would be greatly appreciated! Thank you.

javascript vue.js vue-material

Answer 1

Answer №1

After reviewing the process

You currently store an array of chips (for example:

this.fruits = ['Banana','Apple','Pineapple','SomeOtherFruitWithMoreThan30Chars']

)

Upon pressing enter, the v-model variable is updated and appends your input to the array

Here's my approach:

Implement a deep watch (a regular one might suffice)

watch: {
  fruits:{
    // newVal represents the new value of the array
    handler: function(newVal) {

      //checks if the last element of the array exceeds 30 characters
      if(newVal[(newVal.length - 1)].length > 30){
        //remove the last element of the array
        this.fruits.pop()
      }
    },
    deep: true
  }
}

Utilize the formatter function of the component for validation purposes md-format and return null for entries longer than 30 characters

Answer 2

After reviewing the process

You currently store an array of chips (for example:

this.fruits = ['Banana','Apple','Pineapple','SomeOtherFruitWithMoreThan30Chars']

)

Upon pressing enter, the v-model variable is updated and appends your input to the array

Here's my approach:

Implement a deep watch (a regular one might suffice)

watch: {
  fruits:{
    // newVal represents the new value of the array
    handler: function(newVal) {

      //checks if the last element of the array exceeds 30 characters
      if(newVal[(newVal.length - 1)].length > 30){
        //remove the last element of the array
        this.fruits.pop()
      }
    },
    deep: true
  }
}

Utilize the formatter function of the component for validation purposes md-format and return null for entries longer than 30 characters

Restrict the character count in Vue Material chips

Answer №1

Similar questions

SyntaxError: VM3419:1 - Unexpected token "<" was not caught

I'm experiencing an issue with Bootstrap 5 where the code runs fine on codeply but not on my local machine

Techniques for transferring checkbox values to a JavaScript function

Deleting occurrences of a specific text from a JSON document and subsequently analyzing its contents

What is the process of integrating data retrieved from an SQL query into a Pug template using Express and MySQL?

Dispatch prop within useEffect

Assign a class to the element only when the second div also has a class

Uncovering the characteristics of a GeoJSON data layer within Google Maps V3

What is the most effective method for broadcasting events to multiple component instances in Vue Js?

Utilizing Jquery's each() method to retrieve the exact position of a specific class element

Steps to prevent uib-timepicker from automatically adjusting time based on the Browser Timezone

Struggling to retrieve cookie information within a Vue.js and Laravel project

tips on utilizing the JSON information transmitted from the backend

Is there a way for me to retrieve the data inputted into this form using JavaScript?

JavaScript regular expression for detecting valid characters without repeating a specific character

Exploring Elasticsearch with Ajax Query Syntax

Understanding how to implement action logic in React Redux to control visibility of specific categories

Discover the Primevue DataTable feature that enables dynamic column and column grouping functionality, with the added bonus of gridlines disappearing as you scroll down

Incorporating an Angular 2 Directive within the body tag of an

Utilizing Vue's shorthand syntax for interpolation within attributes allows for a more concise and efficient