What is the best way to retrieve a linked filter in Vue from another?

Question

What is the best way to retrieve a linked filter in Vue from another?

I have created a file to store filters linked to my Vue object, and it is being imported into my App.js. One of the filters I have needs to use another filter:

Vue.filter('formatDateTime', value => {
    if (value)  return moment(String(value)).format('DD-MMM-YY hh:mm')
});
Vue.filter('getActivity', value =>
    (!value.lastvisited)
        ? 'Not visited yet' 
        : 'Last logged in ' + Vue.$options.filters.formatDateTime(value.lastvisited)
)

Unfortunately, this filter cannot reference the global Vue object. Is there a way to work around this issue? While I could simply duplicate the date formatting logic, I would prefer not to.

javascript vue.js filter

Answer 1

Answer №1

Another approach is to separate the definition and global registration.

This method also allows for usability and importability in non-Vue contexts.

// For example, in filters.js
export const formatDateTime = value => value 
  ? moment(String(value)).format('DD-MMM-YY hh:mm') 
  : null

export const getActivity = value => !value.lastvisited
  ? 'Not visited yet' 
  : 'Last logged in ' + formatDateTime(value.lastvisited)

// Then, in a filter-global-registration.js file
import { getActivity, formatDateTime } from 'filters.js'

Vue.filter('formatDateTime', formatDateTime);
Vue.filter('getActivity', getActivity)

Answer 2

Another approach is to separate the definition and global registration.

This method also allows for usability and importability in non-Vue contexts.

// For example, in filters.js
export const formatDateTime = value => value 
  ? moment(String(value)).format('DD-MMM-YY hh:mm') 
  : null

export const getActivity = value => !value.lastvisited
  ? 'Not visited yet' 
  : 'Last logged in ' + formatDateTime(value.lastvisited)

// Then, in a filter-global-registration.js file
import { getActivity, formatDateTime } from 'filters.js'

Vue.filter('formatDateTime', formatDateTime);
Vue.filter('getActivity', getActivity)

Answer 3

Answer №2

One approach I often take is to establish a global reference to the main Vue object like this:

// Create a filter that invokes another filter.
Vue.filter('myFilter', () => {
    window.Vue.$options.filters.myOtherFilter(...);
});

// Initialize the main Vue object.
window.Vue = new Vue({

});

By doing this, you can access your filters with

window.Vue.$options.filters.myOtherFilter()

within your filter functions.

While it may not be the most ideal solution, I've found it useful in situations where you need to define plugins, services, or components without direct access to the current Vue instance.

Answer 4

One approach I often take is to establish a global reference to the main Vue object like this:

// Create a filter that invokes another filter.
Vue.filter('myFilter', () => {
    window.Vue.$options.filters.myOtherFilter(...);
});

// Initialize the main Vue object.
window.Vue = new Vue({

});

By doing this, you can access your filters with

window.Vue.$options.filters.myOtherFilter()

within your filter functions.

While it may not be the most ideal solution, I've found it useful in situations where you need to define plugins, services, or components without direct access to the current Vue instance.

What is the best way to retrieve a linked filter in Vue from another?

Answer №1

Answer №2

Similar questions

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

What is the best way to set up Flow type checking for functions passed as props in a React and Redux application?

Unusual compilation issue encountered in Vue when trying to use a template for a slot

Loading of iframes occurs only after receiving the content sent through the postMessage function

Upon successful authorization, the Node Express server will pass the access token to the React client app via OAuth in the callback

Utilizing jQuery's then() method to display HTML and JSON outputs from printing operations

Every time I attempt to log into my app, I encounter a persistent 401 error message

Is it feasible for a form button to perform multiple actions simultaneously?

Arranging Material UI tabs on both sides

Creating a variety of Flexslider slideshows on the fly

Determine whether an element is currently focused using a Vue.js directive

What causes variables and functions to behave differently when it comes to hoisting?

React.js encountered an error: Objects cannot be used as a React child (found: object containing keys {type, data})

Can you provide a brief explanation for this bubble sort JavaScript code?

What is the best method for transferring properties to the parent component using Vue router?

Developing ES6 modules in C++ using Node.js

I have a task of extracting information from a live Google map and generating a static Google map using API V3

When incorporating "<" or ">" into a parameter value in Angular Translate and then showcasing it in a textarea with ng-model

Proper method for incorporating a single database pool across an Express application

Cascading MVC 2 Dropdown menus