- Computer properties are
a way to make simple transformations reusable.
Plus, to have an advantage of also caching,
so that updates to your interface
are going to be really fast.
Now, let's use this to create a slug
for something we are typing in here.
So slug is sort of a simplified version
of a title.
You see them when you go to websites,
on the URLs generally,
and the way that they work is
special characters like this
are not acceptable,
everything's in lowercase
and there are hyphens in between text characters.
So,
to do that,
we could just add additional things here
to this regular expression.
So we can say slugText
and then let's convert it to LowerCase here,
right,
and that will convert the text to lowercase,
and then we can use the JavaScript replace command
and that let's you use a regular expression,
so this regular expression here is going to look
for anything that is a simple word character
and convert it
and the g just means globally to just no characters.
So it's just going to essentially get rid of those
weird characters for us.
And then we'll do another transformation here.
We'll say replace and we will look for spaces,
and g means globally so everywhere in our text
and then convert that to dashes.
And that plus should be actually on this side
so this means one or more spaces.
And then we'll convert 'em into hyphens.
So that gets us the basic code for creating
a slug out of some text.
So that's pretty cool.
So the problem with this is
that if I wanted to add that slug somewhere else
I'd have to copy this text
or this series of transformations like every time,
so it's easier to make this into a computer property.
So what I'm going to do is take this
and write a method called slugetize.
And so let's go ahead and we can
get rid of all the extra space
that we created there.
What you'll need to do is type in a
section here called compute it
and this is going to be an object that has
all your computer properties.
So here is where I'm going to write
slugetize,
and this is going to be a function
and that function is going to return
and then I'm going to paste
what I copied from before
except that,
because I'm in this computed section
I need to type in the keyword this,
that is going to look for the data property here
and look for the element called slug text
in the data property.
And now you can see that we can use
this slugetized version
of our text anywhere we want to,
so if we want to use it more than once like this,
we wouldn't have to retype all this other stuff
so computer properties are super useful.
The nice thing is that they are also cached,
and that makes them more convenient
when you're doing something that you know
is not going to require constant updates.
It just makes them a little bit more efficient.
Let's get rid of the extra ones,
and that is computed properties.