In Vue.JS method on passed string trim() doesn't work

Question

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.

Answer 1

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

just return with return str.trim()

Answer 2

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();
        }
    }
}

Answer 3

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 :)