web-dev-qa-db-fra.com

Vuejs 2: comment rendre les données en minuscules

J'essaie de faire des données en minuscules (toujours en minuscules)

Je fais et recherche des entrées comme:

<template id="search">
    <div>
        <input type="text" v-model="search">
        <li v-show="'hello'.includes(search) && search !== ''">Hello</li>
    </div>
</template>

Vuejs: (composant)

Vue.component('search', {
    template : '#search',
    data: function(){return{
        search : '',
    }}
});

J'ai essayé watch, mais je ne veux pas d'entrée montrant des minuscules lors de la frappe

watch: {
    'search' : function(v) {
        this.search = v.toLowerCase().trim();
    }
}

Démo: https://jsfiddle.net/rgr2vnjp/

Et je ne veux pas ajouter .toLowerCase() sur la liste de recherche v-show Comme:

<li v-show="'hello'.includes(search.toLowerCase()) && search !== ''">Hello</li>

Une astuce? , j'ai cherché et beaucoup disent simplement utiliser filter mais pas de sorties sur Vuejs 2

Aire de jeux: https://jsfiddle.net/zufo5mhq/ (Essayez de taper [~ # ~] h [~ # ~] )

PS: Bon/meilleur code que j'aimerais savoir aussi, merci

javascriptvue.jslowercase
7
l2aelba

Dans Vue.js 2.0, les propriétés calculées peuvent être utilisées pour remplacer les filtres:

computed: {
  searchInLowerCase() {
    return this.search.toLowerCase().trim();
  }
}

Et maintenant, vous pouvez simplement utiliser searchInLowerCase dans votre modèle:

<li v-show="'hello'.includes(searchInLowerCase) && search !== ''">Hello</li>
15
CodinCat

Tu pourrais même faire ça

{{tag.title.toLowerCase().trim()}}
9
Mir Adnan