Vue.js在舊版瀏覽器中進行條件呈現

我試圖按搜索項過濾集合。當我使用es6語法並內置諸如string.includes（''）之類的功能時，它可以正常工作。不幸的是，我必須支持一些沒有ES6的IE版本，所以我必須在一些情況下以純JavaScript編寫我的腳本。Vue.js在舊版瀏覽器中進行條件呈現

工作代碼在Chrome，但不是在IE：

var vm = new Vue({ 
    el: '#app', 
    data:{   
     term: '', 
     products: [{ ProductCode: '3 Year Fixed'}, { ProductCode: 'Not fixed '},{ ProductCode: '3 Year Fixed'}, { ProductCode: '4 Year Fixed'}, { ProductCode: '5 Year Fixed'}] 
    }, 
    computed:{ 
     filteredProducts: function(){ 
       if(this.term === ''){ 
        return this.products; 
       }else{ 
        return this.products.filter(
         product => product.ProductCode.includes(this.term)); 

       }    
     } 
    } 
})

所以我寫了這個代碼是行不通的，但不能當場爲什麼不：

computed:{ 
     filteredProducts: function(){ 
       if(this.term === ''){ 
        return this.products; 
       }else{ 
        return this.products.filter(function(product){ 
         return product.ProductCode.idexOf(this.term) !== -1 
        }) 


       }

我檢查該文件和我看起來完全相同：

computed: { 
    evenNumbers: function() { 
    return this.numbers.filter(function (number) { 
     return number % 2 === 0 
    }) 
    } 
}

來源

2017-01-26 Sóskuthy András

我會建議使用babel，因此您不必自己處理瀏覽器兼容性問題：https：//babeljs.io –

另外，您是否在控制檯中遇到任何錯誤？ 'idexOf'看起來像是'indexOf'的錯字 –

我沒有在我的電腦上得到任何錯誤我想我只是在編輯時犯了一個錯誤。是的，我知道巴別將是最好的解決方案，但恐怕我們不允許將它用於生產......還難以設置？ –

正確的解決方案是，上下文已更改一次過濾功能，所以我不得不緩存this。

var self = this;

另一種解決方案是隻使用Vue實例屬性。 vm.term

來源

2017-01-26 15:47:07

Vue.js在舊版瀏覽器中進行條件呈現

回答

相關問題