如何使用Vue過濾「live」結果？

我有一個輸入v模型，我想通過產品列表進行過濾。如何使用Vue過濾「live」結果？

這是我的過濾器。問題在於，只有在項目名稱與輸入完全匹配的情況下才有效。如何在輸入輸入時修改過濾器以查看任何部分匹配？

Vue.filter('byName', function (data, input) { 

if(input){ 
    return data.filter(function (item) { 
     return item.name == input 
    }); 
} 

return data 

});

來源

2016-06-23 Wolfgang Müller

不清楚你在問什麼代替

// we check if the item's name starts with the input return item.name.startsWith(input);

。解釋「僅匹配產品直播」...... – haim770

您可能正在尋找'String.prototype.indexOf（）'或'String.prototype.includes（）'方法。 – undefined

如果您認爲我的解決方案是有用的，upvote它：D。給予[獨角獸美元]是一種良好的禮節（http://meta.stackexchange.com/questions/194061/is-it-acceptable-to-ask-for-upvote-accept-in-an-answer-when-submitting-它＃回答 - 194063）到幫助你的答案 – asemahle

如果你想看到「活」的結果，那麼你需要，使其返回部分匹配項的代碼過濾器。

最簡單的方法是使用startsWith()方法。以下過濾器使用startsWith()，匹配以輸入開始所有項目：

Vue.filter('byName', function (data, input) { 
    if(input){ 
    return data.filter(function (item) { 
     // we check if the item's name starts with the input 
     return item.name.startsWith(input); 
    }); 
    } 
    return data 
});

中的行動，過濾器的Here is a JSFiddle。

在另一方面，如果你想返回匹配隨時隨地，而不僅僅是那些與輸入開工的項目，你可以使用String.prototype.indexOf()。

要做到這一點，與

// we check if the item's name contains the input as a substring 
return item.name.indexOf(input) > -1;

來源

2016-06-23 12:39:19 asemahle

謝謝。而已！ –

如何使用Vue過濾「live」結果？

回答

相關問題