Question

我正在尝试使用Vue在单击按钮时调用函数。我想对传递给它的数据应用过滤器，因为它将运行的功能要求以某种方式对数据进行格式化。这是我正在尝试的：

<button v-on:click="functionName(variable|filter)">icon</button>

但这不起作用。该函数将仅在没有过滤器的情况下正确调用。实现此目的的正确方法是什么？

Answer 1

您可以将过滤器实现为一个函数（在methods内部或脚本中任何地方外部），然后可以简单地调用它并重用其返回值：

const app = new Vue({
  el: '#app',
  methods: {
    filter(data) {
      return data * 2; // or anything
    },
    functionName(data) {
      alert(data);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <button @click="functionName(filter(1))">icon</button>
</div>

Answer 2

您可以在方法中调用this.$options.filters.filterName

const app = new Vue({
  el: '#app',
  methods: {
    functionName(data) {
      console.log(this.$options.filters(data));
    }
  }
});

来源：https://github.com/vuejs/Discussion/issues/405#issuecomment-142089920

如何将过滤器应用于传递给函数的数据？

2 个答案: