javascript – 根据变量选择Vue过滤器

是)我有的

我正在基于Vue2中的2D数组生成一个表.我可以让表格在正确的位置显示所有值,但我在格式化方面遇到问题.模板看起来像这样：

<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] |货币}}它将所有格式都很好地吐出来.唯一的问题是我有混合数据类型.在示例中,收入,成本和利润都是货币值,但保证金是百分比.

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

var data = [
  ['revenue','currency'],'percent']
];

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

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

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

我想要的是

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

解决方法

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

new Vue({
  el:"#app",data:{
    data: [
      ['revenue',"currency"],"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.