Filter programmgesteuert in Vue.js anwenden Komponente

Question

Ist es möglich, Filter anzuwenden, um Werte programmgesteuert auszuwählen? Wie Sie sehen können, wiederhole ich jeden Datensatz und dann jede Spalte. Ich überprüfe, dass die column.id mit d beginnt, was bedeutet, dass es eine datetime ist, so würde ich gerne den humanize Filter nur auf dieses Feld anwenden. Das Ergebnis des Codes, den Sie hier sehen, ist NaN für jedes Feld.

<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

Das wird irgendwie Code-dick für die Ansicht. Es wäre besser, eine Methode zu erstellen, die das tut (insbesondere da Filter veraltet sind - [Update] nur Filter in Direktiven sind veraltet).

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>