Implement Dynamic Filters in a Vue Component

Question

Implement Dynamic Filters in a Vue Component

How can filters be programmatically applied to select values? During each iteration of records and columns, I am checking if the column ID starts with 'd', indicating it's a datetime field. In such cases, I want to apply the humanize filter only to that specific field. However, the current code results in NaN for every field.

<tr v-for="record in records" @dblClick="readRecord(record)">
  <td v-for="column in columns">
    {{ _.startsWith(record[column.id], 'd') ? record[column.id] | humanize : column.id; }}
  </td>
</tr>

javascript vue.js

Answer 1

Answer №1

It might be a good idea to refactor the code in the view into a separate method, especially considering that filters are now deprecated (update: only filters in directives are deprecated).

new Vue({
  el: '#app',
  data: {
    columns: [{
      id: '1'
    }, {
      id: '2'
    }],
    record: {
      2: 'dthing'
    }
  },
  methods: {
    displayCol: function(col) {
      if (s.startsWith(this.record[col.id], 'd')) {
        return this.humanize(this.record[col.id]);
      }
      return col.id;
    },
    humanize: function(recVal) {
      return `HUM${recVal}`;
    }
  }
});

<!--script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script-->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.string/3.3.4/underscore.string.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<div id="app">
  <div v-for="column in columns">
    {{displayCol(column)}}
  </div>
</div>

Answer 2

It might be a good idea to refactor the code in the view into a separate method, especially considering that filters are now deprecated (update: only filters in directives are deprecated).

new Vue({
  el: '#app',
  data: {
    columns: [{
      id: '1'
    }, {
      id: '2'
    }],
    record: {
      2: 'dthing'
    }
  },
  methods: {
    displayCol: function(col) {
      if (s.startsWith(this.record[col.id], 'd')) {
        return this.humanize(this.record[col.id]);
      }
      return col.id;
    },
    humanize: function(recVal) {
      return `HUM${recVal}`;
    }
  }
});

<!--script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script-->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.string/3.3.4/underscore.string.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<div id="app">
  <div v-for="column in columns">
    {{displayCol(column)}}
  </div>
</div>

Answer 3

Answer №2

Here is where you can invoke your filter: this.$options.filters.humanize

Answer 4

Here is where you can invoke your filter: this.$options.filters.humanize

Implement Dynamic Filters in a Vue Component

Answer №1

Answer №2

Similar questions

Suggestions for improving the way time durations are calculated using jQuery

JavaScript button is not functioning properly to increase or decrease the value in the input field

Can you explain how to convert a 32-bit floating point number from a Buffer to a JSON string in NodeJS while maintaining the original precision?

Index is bound to data using a specific syntax for data binding

The dimensions of the box are not predetermined by the size of the photo

Identifying the various types in Typescript

What steps can be taken to resolve the "npm ERR! code ELIFECYCLE" error in a React application?

Issue encountered while executing npm command: "Module 'npmlog' not found"

Create a new chart using completely unique information

changing the RadioButtonList to preselect a default value

Tips for sending images as properties in an array of objects in React

Updating a model within an ng-repeat directive from external sources

Tips for refreshing a page in Vue.js

Expanding a JSON data structure into a list of items

Socket.io integration with JWT authentication

individualized django models field for each user

What is the best way to create a loop within a JavaScript function?

What is the best way to convert a recordset to an array using React?

Issue with jQuery AJAX request not working as expected

Retrieve the current URL of an IFRAME