Nuxt.js 使用 vue 过滤器插件不起作用

Question

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

Answer 1

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.