Use global functions in vue directives

Asked By: Anonymous

I’m trying to use lodash methods (_.isEmpty) in vue directives like this:

<div class="post" v-for="post in posts"></div>
    ...
    <div class="comments" v-if="! _.isEmpty(post.comments)">
      <div class="comment" v-for="comment in post.comments"></div>
    </div>
    ...
</div>

but getting the following error:

Uncaught TypeError: Cannot read property ‘isEmpty’ of undefined

It seems vue is looking for the _.isEmpty method inside the current scope. How should I call global functions in this case?

Solution

Answered By: Anonymous

You can only access functions of the current Vue instance/component in a template:

• data
• props
• methods

No “third-party” code can be run.

So, you would have to create a method in the Vue component to proxy to the lodash methods:

methods: {
  isEmpty: function (arr) { return _.isEmpty(arr)}
}

and use this method in the template instead:

<div class="comments" v-if="! isEmpty(post.comments)">