Methods

Adding a methods object

So far, we have only been working inside of this data() section:

// script.js
Vue.createApp({
    data() {
        return {
            name: "Homer Simpson",
            links,
            posts: posts,
            darkModeSet: false,
            darkMode: {
                background: "#38383a",
                color: "whitesmoke",
            },
            base: {
                fontFamily: "monospace",
            },
        };
    },
}).mount("body");

Now we will add a new section for methods. This will enable us to do lots of cool things, such as changing our data, and generally making our apps much more interactive and useful.

If you are familiar with functions in JavaScript, methods do the same thing but are named a method because they are part of an object.

Our data was set up as a function:

data() {}

However, methods are set up as an object, and we call them manually:

Vue.createApp({
  data() {
    return {
        // ...
    };
  },
  methods: {

  }
}).mount("body");

Setting the toggleMode method

Since we don’t want too much logic in our HTML code, we can abstract the toggle dark mode code into a method:

methods: {
  toggleMode() {
    this.darkModeSet = !this.darkModeSet;
  },
},

Along with making our code cleaner, these methods can also be reused elsewhere.

Notice here we are using the this keyword. Both the data and methods sections are part of the Options API. These sections amongst others we will look at, have access to each others properties by using the this keyword.

And we will see many more examples of this as we move through the course.

Finally, update the button in the index.html file to call the method:

<button @click="toggleMode">
  {{ darkModeSet ? '&#9788;' : '&#9789;' }}
</button>

We have now extracted our code into a method. This means cleaner HTML code, and a method we can also re-use if required.