javascript - 在 Vue.js 组件中以编程方式应用过滤器

Question

是否可以应用过滤器以编程方式选择值？正如您所看到的，我正在迭代每条记录，然后是每列。我正在检查 column.id 是否以 d 开头，这意味着它是一个 datetime，因此我想应用 humanize 仅过滤该字段。您在此处看到的代码的结果在每个字段上都是 NaN。

<tr v-for="record in records" @dblClick="readRecord(record)">
  <td v-for="column in columns">
    {{ _.startsWith(record[column.id], 'd') ? record[column.id] | humanize : column.id; }}
  </td>
</tr>

Answer 1

View 的代码变得越来越厚。最好创建一个方法来做到这一点(特别是因为过滤器已被弃用——[更新]仅指令中的过滤器被弃用)。

new Vue({
  el: '#app',
  data: {
    columns: [{
      id: '1'
    }, {
      id: '2'
    }],
    record: {
      2: 'dthing'
    }
  },
  methods: {
    displayCol: function(col) {
      if (s.startsWith(this.record[col.id], 'd')) {
        return this.humanize(this.record[col.id]);
      }
      return col.id;
    },
    humanize: function(recVal) {
      return `HUM${recVal}`;
    }
  }
});

<!--script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script-->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.string/3.3.4/underscore.string.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<div id="app">
  <div v-for="column in columns">
    {{displayCol(column)}}
  </div>
</div>