根据变量选择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, '', '%']
];

我失败了

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

我试过的

正是在这一点上，我遇到了过滤器。由于我继承的这个项目已经内置了一堆，看起来他们会做我想做的。我可以把它改成它，{{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>

例子。