Как передать аргумент фильтрам vuejs?

у меня есть следующий фильтр vuejs

import Vue from 'vue'

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

который я тогда называю 

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

но я хотел бы передать аргументы 0, 10 к фильтру на html. Есть ли способ сделать это?

6
vue.js vuejs2

3 ответов

попробуйте так передать дополнительное значение как param в 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 говорит:фильтр-аргумент-синтаксис-изменен

в вашем примере

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>
9

по словам документация, фильтры являются функциями JavaScript, поэтому они могут принимать аргументы, поэтому вы должны быть в состоянии сделать:

<p> {{ filename | truncate(10) }} </p>

значение filename будет передано в первый аргумент. 10 будет передано в truncate в качестве второго аргумента

2

просто расширьте и вызовите свою конструкцию с параметрами:

Vue.filter('truncate', function (value, from, count) {
  return value.substring(from, count)
})

<p>{{filename | truncate(0, 10)}}</p>
2