Best ref hat brands: Comparing the options to help you choose the right one!

Okay, so I was messing around with Vue 3 the other day, specifically trying to get a grip on this whole ‘ref’ thing. I’ve used Vue 2 before, but the Composition API is still kinda new to me. So, I thought, “Let’s build something simple, something… hat-related!” Thus began my journey into the world of the ‘ref hat’.

The Setup

First, I fired up a new Vue project using the Vue CLI. You know, the usual vue create stuff. Once that was done, I jumped into the file and cleared out all the boilerplate code. I wanted a clean slate to work with.

Creating the Ref

Now, for the main event. I imported the ref function from Vue. It looks something like this:

import { ref } from 'vue';

Then, inside the setup() function (this is where all the Composition API magic happens), I created a ref variable. I decided to call it hatType, and I initialized it with the string “Fedora”:

setup() {
const hatType = ref('Fedora');
return {
hatType

I make sure that the variable must be returned, so the template can access it.

Displaying the Hat

Next, I headed over to the template section of my component. I added a simple paragraph to display the value of my hatType ref:

<template>
<p>My current hat: {{ hatType }}</p>
</template>

I ran the dev server, and boom! There it was on the screen: “My current hat: Fedora”. So far, so good.

Changing the Hat

Of course, a static hat is no fun. I wanted to be able to change it! So, I added a button to my template:

<button @click="changeHat">Change Hat</button>

See that @click? That’s Vue’s way of saying “when this button is clicked, run the changeHat function.” Now I needed to actually create that function.

Back in the setup() function, I add a new function:

const changeHat = () => {
* = 'Top Hat';

And do not forget to return it.

return {
hatType,
changeHat

Notice the .value? That’s important. When you’re working with refs, you need to use .value to get or set their actual value. I learned that the hard way after a few minutes of head-scratching.

I saved everything, clicked the button in my browser, and… ta-da! The hat changed to “Top Hat”. Success!

Experiment

I want a list of hats, and every time the button be clicked, the hat will be different.

First I created a hat list, and a index to get the element from the list.

const hatList = ['Fedora', 'Top Hat', 'Baseball Cap', 'Beanie'];
const hatIndex = ref(0);

Then I modified the `changeHat` function.

const changeHat = () => {

* = (* + 1) % *;
* = hatList[*];

That`%`is a cool trick. When the `hatIndex` reach the last one of the `hatList`, it will be back to 0, and start again.

Finally, do not forget to return the new value.

return {
hatType,
changeHat,

Wrapping Up

It’s a super basic example, I know, but it really helped me understand how refs work in Vue 3. It’s all about that .value property, and remembering to return your refs from the setup() function. Now I can go forth and build more complex things with this newfound knowledge. Maybe a whole wardrobe, not just hats!