Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Customize Tag Input

We can customize our tag input in various ways.

We can limit the number of tags we can add and the number of characters each can have.

The maxlength prop limits the number of characters in a tag.

The maxtags prop limits the number of tags we can enter.

For example, we can write:

<template>
  <section>
    <div class="field">
      <b-taginput v-model="tags" maxlength="10" placeholder="Add a tag"></b-taginput>
      {{tags}}
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return { tags: [] };
  }
};
</script>

to limit the number of characters of each tag to 10 max.

#web-development #technology #javascript