以編程方式在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>