根据变量选择Vue过滤器

Question

我有什么

我正在 Vue2 中基于二维数组生成一个表。我可以让表格在正确的位置显示所有值，但我在格式化时遇到了问题。模板看起来像这样：

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in data">
      <td>{{row[0]}}</td>
      <td>{{row[3]+row[1]+row[4]}}</td>
      <td>{{row[3]+row[2]+row[4]}}</td>
    </tr>
  </tbody>
</table>

数据看起来像这样：

var data = [
  ['revenue', 123.4, 153.48, '$'],
  ['cost', 93.26, 109.48, '$'],
  ['profit', 30.14, 44, '$'],
  ['margin', 24.425, 28.668, '', '%']
];

我失败了

这行得通……不错。我可以有任何我想要的行，我可以指定单位——前缀或后缀——但这并不完美。最大的问题是货币的小数位数不同。我可以将这些值存储为字符串，但其中一些会在计算中重复使用，这意味着我必须解析它们。

我尝试了什么

正是在这一点上，我遇到了过滤器。由于我继承的这个项目已经内置了一堆，看来他们会做我想要的。我可以将其更改为{{row[1] | currency}}，然后它会以很好的格式将其吐出。唯一的问题是我有混合数据类型。在示例中，revenue、cost 和 profit 都是货币值，但 margin 是百分比。

理想情况下，我想在每个数组的第 4 个索引中指定过滤器：

var data = [
  ['revenue', 123.4, 153.48, 'currency'],
  ['cost', 93.26, 109.48, 'currency'],
  ['profit', 30.14, 44, 'currency'],
  ['margin', 24.425, 28.668, 'percent']
];

然后使用类似这样的东西吐出值：

<td>{{row[1] | row[3]}}</td>
<td>{{row[2] | row[3]}}</td>

但是，这似乎不起作用。我还尝试了filters[row[3]] 和许多其他变体，但似乎不存在这样的语法。我当然可以编写自己的格式化函数，然后使用this.formatters[row[3]](row[1]) 之类的东西，但是重新实现已经存在的东西没有多大意义。如果有一种方法可以访问过滤器的底层功能而又不会使其过于混乱，我可以这样做，但这似乎并不理想。

我想要什么

理想的解决方案是使用现有过滤器对表格中的所有输出进行格式化。直接在值上调用函数也可以。如果做不到这一点，我可以使用现有函数预先格式化这些值并将它们作为字符串存储在一个单独的对象中，但这并不理想。

Answer 1

这将允许您保留数据格式并使用现有过滤器。

new Vue({
  el:"#app",
  data:{
    data: [
      ['revenue', 123.4, 153.48, "currency"],
      ['cost', 93.26, 109.48, "currency"],
      ['profit', 30.14, 44, "currency"],
      ['margin', 24.425, 28.668,  "percent"]
    ]
  },
  methods:{
    format(value, filter){
      return Vue.filter(filter)(value)
    }
  }
})

模板

  <tr v-for="row in data">
    <td>{{row[0]}}</td>
    <td>{{format(row[1], row[3])}}</td>
    <td>{{format(row[1], row[3])}}</td>
  </tr>

Example.

Answer 2

缺少documentation on Vue filters，但您显然无法像您想要的那样动态访问过滤器。

您最好的选择是将格式化函数保存在您建议的对象中。

您可以通过向组件添加一个包罗万象的过滤器并将类型作为参数传递来使其更简洁：

filters: {
  format(value, type) {
    return this.formatters[type](value);
  }
}

然后在你的模板中：

<td>{{row[2] | format(row[3]) }}</td>

Answer 3

使用

{{row[2] | rowFilter(row[3])}} 

并创建自己的过滤器