Limit text length in vue-Multiselect

Question

I have used the 'Single Select' Object from the 'vue-MultiSelect' package for 'search select' in my project. The options I have in the select list are too lengthy (as they are site addresses/urls) and they flow over the input box size and destroy the UI. I may need to set up a character limit for populating the value which may help to keep the UI intact. Which class I can use to limit the length of the text that populate? Or any better alternatives?

For Normal select list, We can set the data-limit like data-limit ="37" to limit the text length.

<select
  v-model="filter.url_name"
  class="w-4/6 relative truncate overflow-hidden form-select pr-10 appearance-none "
  aria-label="Default select example">
  <option
    class="absolute w-4/6 truncate overflow-hidden right-0"
    data-limit="37"
    :value="item"
    v-for="(item, index) in requiredUrlsFiltersData"
    :key="index"
  >
    {{ item }}
  </option>
</select>

For vue-multi select, I have tried the same way and tried to pass it inside a method like this

@input="siteSelected(filter.url_name, 37, filter.url_name.length)"

and return the value

siteSelected(str, max, len) {  
  return len > max ? str.substring(0, 37) : str;
},

Both didn't work.

<multiselect
  v-model="filter.url_name"
  :options="requiredUrlsFiltersData"
  placeholder="select a url"
  class="max-w-sm"
  data-limit="37"
  :rules="maxlength"
  @input="siteSelected(filter.url_name, 37, filter.url_name.length)"
  :show-labels="false"   
>
</multiselect>

Answer 1

You can try with computed property.

Create computed property for requiredUrlsFiltersData , there you can limit the length of the url's and connect :options with that new shortened values.

Use filter.url_name.full for back-end API call.

 var app = new Vue({ el: '#app', components: { Multiselect: window.VueMultiselect.default }, data () { return { filter: {url_name: null}, requiredUrlsFiltersData: [ "1longurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurl1", "2longurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurl2", "3longurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurllongurl3" ] } }, computed: { trimedData() { return this.requiredUrlsFiltersData.map(r => { return {full: r, url: r.slice(0, 37)} }) } } })

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> <div id="app"> <multiselect v-model="filter.url_name":options="trimedData" placeholder="select a url" label="url" track-by="url":multiple="true":taggable="true" ></multiselect> <pre>{{ filter.url_name }}</pre> </div>