Vue-Tables-2: How to pass a VueJS custom filter?

Question

How would one go about applying a VueJS filter (i.e. {{ price | currency }}) to data displayed using vue-tables-2?

I tried playing around with slots with one of the demo tables to no avail: https://jsfiddle.net/jfa5t4sm/11/

This is a bit annoying, as 'custom filters' mean different things in different context, so searching the docs is not bearing fruit.

Anyone have ideas?

Steven B. · Accepted Answer · 2017-11-30 16:10:51Z

2

Since it's a scoped slot you have to access the value through the props object and give it the correct slot name.

  <template slot="price" scope="props">
    <div>
      <p>{{ props.row.price | currency }}</p>
    </div>
  </template>

answered Nov 30, 2017 at 16:10

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Clearly I need coffee. Thanks!