Im trying to use multiple filters but it's not working here is my code. It's not making it to lowercase it just removes spaces.
EDIT:
For the lowercase I want to use Vue js filter lowercase
<div class="col-md-4" :class="playerBio.current_team | lowercase | removespace ">
JS
removespace( str ) {
if( str ) {
return str.replace(/\s+/g, '').toLowerCase();
}
}
Example:
new Vue({
el: '#app',
data: {
myText: 'Hello There Vue'
},
mounted() {
console.log(this.$refs['div']) // log this div
},
filters: {
lowercase: function(value) {
return value.toLowerCase()
},
removespace: function(value) {
return value.replace(/\s/g, '')
}
}
});<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div class="col-md-4" :class="myText | lowercase | removespace" ref="div"></div>
</div>I edited my first answer, because it appears filters can be used with v-bind as shown above.
@PenAndPapers, you should write your own filter for lowercase, because there is no ready filters in vers 2.
var demo = new Vue({
el: '#demo',
data: {
cls: "cL ass"
},
filters: {
lowercase: function (value) {
if (!value) return ''
value = value.toString()
return value.toLowerCase();
},
removespace( str ) {
if( str ) {
return str.replace(/\s+/g, '');
}
}
}
}).class
{
height: 50px;
width: 50px;
background-color: red;
}<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
{{cls | lowercase | removespace}}
<div v-bind:class='cls | lowercase | removespace'></div>
</div>