So I am trying to remove white space from one of the returned object's property with .trim() function but it doesn't work.

I already tried applying JS functions such as .replace(/\s/g,'') but it is also not working

<script>
export default {
    name: 'navigation',
    props: ["navigation"],
    methods:{
        whiteSpace: function(a){
            var str = a;
            str.toLowerCase();
            str.trim();
            console.log(str);


            return str;
        }
    }
}
</script>

HTML

<li>
  <router-link :to="{ path: whiteSpace(nav.linkTitle) }">
       {{nav.linkTitle}}
  </router-link>
</li>

It should return string without white space but it doesn't remove white space.

So I am trying to remove white space from one of the returned object's property with .trim() function but it doesn't work.

I already tried applying JS functions such as .replace(/\s/g,'') but it is also not working

<script>
export default {
    name: 'navigation',
    props: ["navigation"],
    methods:{
        whiteSpace: function(a){
            var str = a;
            str.toLowerCase();
            str.trim();
            console.log(str);


            return str;
        }
    }
}
</script>

HTML

<li>
  <router-link :to="{ path: whiteSpace(nav.linkTitle) }">
       {{nav.linkTitle}}
  </router-link>
</li>

It should return string without white space but it doesn't remove white space.

• javascript
• vue.js

Share Improve this question Follow edited Feb 19, 2019 at 14:00 sobolevn 18.1k66 gold badges6464 silver badges6262 bronze badges asked Feb 19, 2019 at 13:34 Jonas TamoševičiusJonas Tamoševičius 18522 gold badges33 silver badges1313 bronze badges 2

• Why are you declaring a new var? Just use return a.toLowerCase().trim(); inside the whiteSpace method – Daniel Gale Commented Feb 19, 2019 at 13:38
• I know right, I was trying to do it in so many ways... – Jonas Tamoševičius Commented Feb 19, 2019 at 13:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

This code:

str.toLowerCase();

returns a new value. It doesn't modify the current value, so you should have done this:

var str = a;
str = str.toLowerCase();
str = str.trim();
console.log(str);

but any ways, you could just return the trimmed value like so:

export default {
    name: 'navigation',
    props: ["navigation"],
    methods: {
        whiteSpace: function (a) {
            return a.toLowerCase().trim();
        }
    }
}

The trim method does not modify the object, it returns a new string.

just return with return str.trim()

So I found out the problem. .trim() function doesn't work, I tried .replace(/\s/g, ""); and it helps, thank you for your help guys :)