Vue 2 With TypeScript – Part 4 – Adding Events to your Component

In this chapter we are just going to expand our ItemsList.component.vue a little bit so we can handle when the user clicks on an item in the list.

ItemsList Component

Start by updating the <template> section by adding a @click1 attribute to the <li> element, pointing to an handler called onItemClick and passing the reference to the time as an argument:

<li v-for="item in items" :key="item.id" @click=“onItemClick(item)”>
    {{ item.name }}
 </li>

Then within the <script> section inside our component class, add a function that implements our onItemClick handler, toggles the item.selected property from true to false or vice versa and logs the item id and selected properties to the console for preliminary debugging:

export default class ItemsListComponent extends Vue {
    @Prop() items!: IItem[]

    onItemClick(item: IItem) {
        item.selected = !item.selected
        console.log('onItemClick', item.id, item.selected)
    }
}

Then, the web browser should have refreshed, and when clicking on the items in the list you should see the message being displayed in the browser developer console, and when clicking multiple time on the same item it should print true then false etc showing that toggling is working:


Now, we learned how to add a click handler to our component and changing the data item selected property that way. However, in an app that will grow large, have many components/views that will need to be aware of each other state, or the state of the data they manipulate, this is not the best pattern to use.

In the next chapter we’ll introduce Vuex to manage our state in a more appropriate pattern where changes in state are done in a centralized place (State Management Pattern) and offers a way to separate state from views and actions.

Here is the official Vuex definition from the official website:

“Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue’s official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.”2

Chapter 4 Recap 

What We Learned

  • How to add a click handler to our ItemsList component
  • How to manipulate the item selected property through our click handler 

Observations

  • The items selected property is being manipulated directly within our component
  • We need a more centralized way to handle changes on the data and state of the application

Based on these observations, there are a few improvements that we will make in the next chapters:

Improvements

  • Implement a Vuex state store and commit the changes to our items in a centralized place

1 In Vue, the @ prefix on a DOM element attribute is a shorthand for the v-on directive. Here, :items works exactly as v-on:click, but we prefer the shorthand as this makes the code less cluttered. Reference: https://vuejs.org/v2/guide/syntax.html#v-on-Shorthand

2 Reference: https://vuex.vuejs.org/