CODEWITHSUNDEEP
vue.jsnuxt.js
Steve
Steve

Reputation: 645

Nuxt.js using vue filter plugin does not work

I'm trying to use a Vue filter with Nuxt and i just can't get it to work.

plugins/filters.js

import Vue from 'vue'

/** Vue Filters Start */
Vue.filter('truncate', function (text, length, suffix) {
  if (text.length > length) {
    return text.substring(0, length) + suffix
  } else {
    return text
  }
})
/** Vue Filters End */

nuxt.config.js

  plugins: [
    { src: '~/plugins/filters.js' }
  ],

Vue file 

    <h2 class="m-0">
      {{ selected ? (selected.name | truncate(10, '...') ) : 'Place' }}
    </h2>

The error i'm getting

_vm.truncate is not a function

Upvotes: 1

Views: 1612

Answers (1)

Braks
Braks

Reputation: 639

If anyone stumbles upon a similar problem, it seems that Vue doesn't like the Filter being used inside the terniary operator. Instead you can append the filter to the result of the operator so {{ (selected ? selected.name : 'Place') | truncate(10, '...') }} does work.

Upvotes: 3

Related Questions