如何在vuejs webpack加載器模板中創建自定義過濾器？

Question

我在文檔中看到過。它告訴像

Vue.filter('reverse', function (value) { 
    return value.split('').reverse().join('') 
}) 

我試圖創建在vuejs的WebPack裝載機濾波器

export default { 
    filter: { 
    reverse: function(value) { 
     return value.split('').reverse().join('') 
    } 
    } 
} 

但它不工作創建過濾器。任何人都建議如何實施。

Answer 1

我相信你需要filters在filter代替：

export default { 
    filters: { 
    reverse: function(value) { 
     return value.split('').reverse().join('') 
    } 
    } 
} 

Answer 2

根據在遵守文件中的函數checkFilters vue.common.js

/** 
* Check read/write filter stats. 
*/ 

checkFilters: function checkFilters() { 
    var filters = this.filters; 
    if (!filters) return; 
    var i = filters.length; 
    while (i--) { 
    var filter = resolveAsset(this.vm.$options, 'filters', filters[i].name); 
    if (typeof filter === 'function' || filter.read) { 
     this.hasRead = true; 
    } 
    if (filter.write) { 
     this.hasWrite = true; 
    } 
    } 
}, 

所以，如果它是一個單向的過濾器，它必須是一個功能。如果它是一個雙向過濾器，它是一個具有讀屬性的對象，它至少是一個函數。

所以，在VUE文件，如果你想自定義過濾器，你應該這樣寫：

export default { 
    filters: { 
    "reverse": function(value) { 
     return value.split('').reverse().join('') 
    } 
    } 
} 

如果它是一個雙向的過濾器，你應該這樣寫：

export default { 
    filters: { 
    "reverse": { 
     read: function(value) { 
     return value.split('').reverse().join('') 
     }, 
     write: function(val, oldVal) { //this is not neccessary 
     //something you want to return 
     } 
    } 
    } 
}