[Vuejs]-Bind class with function

You don’t need {{ }} and this. when binding this way, just do this:

:class="isMobile() ? 'mobile-chip-overflow' : 'chip-overflow'"

and it will work.

EDIT:

When using a .js file with resusable functions please consider to use a mixin. However, if you still do not want to use it, you can import the function like this:

  methods: {
    isMobile: import isMobile from './abstract.js',
  }

or even like this:

import abstractFunctions from './abstract.js';

export default {
  methods: {
    isMobile: abstractFunctions.isMobile,
  },
};

Depending of how are you exporting the functions inside abstract.js.

You can make

:class="chipClasses"


computed: {
    chipClasses: () {
        return {
            mobile-chip-overflow: this.isMobile(),
            chip-overflow: !this.isMobile()
        }

    }
}

Or

:class="{mobile-chip-overflow: this.isMobile(),
         chip-overflow: !this.isMobile()
         }"

I’ve done in this second way, and it works.