How to pass an argument to vuejs filters?

Question

I have the following vuejs filter

import Vue from 'vue'  Vue.filter('truncate', function (value) {    return value.substring(0, 10) }) 

Which I then call as

<p> {{filename | truncate}} </p> 

but I would like to pass the arguments 0, 10 to the filter on the html. Is there any way to do this?

Answer 1

Try like this to pass extra value as param in vuejs filters

var app = new Vue({      el: "#vue-instance",      filters:{        currency: function(value,arg1){          return arg1+value;        }      },      data: {      },      mounted() {      }  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>  <div id="vue-instance">    {{123 | currency('$') }}  </div>

Docs says : Filter-Argument-Syntax-changed

In your given example

Vue.filter('truncate', function (value,start,end) {     return value.substring(start, end)  })    var app = new Vue({      el: "#vue-instance",      data: {      },      mounted() {      }  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>  <div id="vue-instance">    {{ 'this is niklesh.raut' | truncate(0,10) }}  </div>