[Vuejs]-How to use List.JS with Vue + Axios?

by

2👍

✅

As you suspected, List.js isn’t going to work properly if the DOM changes unpredictably. In this case, axios makes its call and populates the data after the (empty) List has been read into featureList.

Your example would work if you put the list-selecting-and-filtering code in the resolution of the axios call, but that’s not going to be a solution that works in a truly dynamic environment.

A custom directive will be called every time the DOM updates, so you can apply your adjustments consistently. Here’s a directive to apply a filter using List.js:

  directives: {
    filteredList(el, binding) {
      if (binding.value) {
        const options = {
          valueNames: ['playerPosition']
        };
        const featureList = new List(el, options);

        featureList.filter((item) => item.values().playerPosition === binding.value);
      }
    }
  }

Apply it like so:

<div class="all-players-wrapper" v-filtered-list="filterValue">

Add the filterValue data item, and have the button set it:

<button id="filter-qb" @click="() => filterValue='QB'">QB</button>

and you’re in business.

It’s worth noting that you could get the same effect by using a computed to filter the data, and you wouldn’t need an external library.

Updated fiddle

👤Roy J

Leave a comment