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

これは、ビューの種類がコードのようになっています。それを行う方法を作る方が良いでしょう（特に、フィルタは廃止されました - ディレクティブの[更新]フィルタのみが推奨されていません）。

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>