# Click

Click (or tap, depending on the device) is the mother of interactivity. With clicks, components are added and removed, data is saved and deleted, pages are opened, and animations are played.

To make your prototypes react to user clicks, you need to do two things:

1. Add an event listener to a container you expect users to interact with.
2. Specify instructions that you want to be executed when the click is detected.

# Events and instructions

Let's start with a pair of buttons that change the value of the variable isUserLoggedIn when clicked:

<button @click="isUserLoggedIn = true">
  Log in
</button>
<button @click="isUserLoggedIn = false">
  Log out
</button>

The @click associated with the first button, for example, can be read as “when users click the button, assign the value true to the variable isUserLoggedIn”. Here’s the breakdown of the syntax:

• @ indicates that this is an event listener.
• click specifies the event you want to listen for.
• isUserLoggedIn = true is the instruction you want to be executed when the event is triggered.

# Assigning a value

As described in the Variables article, when you add a variable to the data container, you specify a name and a default value:

data: {
  doShowDetails: false,
}

To change the default value, you need to assign a new one. A single equals sign assigns a value on its right to a variable on its left:

<button @click="isUserLoggedIn = true">

Spaces around an equals sign are optional, but usually they improve the readability of your code.

# From variable to variable and multiple instructions

Consider another example—a user fills out a form, presses the Submit button, and then information gets saved and displayed elsewhere:

To achieve this, you need:

• A variable emailInput connected to the input form control with v-model.
• Another variable emailSubmitted to store and display the submitted information.
• An event listener to copy data from one variable to another on click.

The latter can be done by assigning the value of one variable to another variable. The button in the code below will assign the value of emailInput to emailSubmitted when clicked:

<input v-model="emailInput">
<button @click="emailSubmitted = emailInput">
  Sign up
</button>
<!-- left panel -->
<div>Submitted email: {{emailSubmitted}}</div>

To complete the prototype, you also need to clean up the input form control when the button is pressed. You can define multiple instructions for one event by separating them with a semicolon. The full-feature button also assigns an empty string to emailInput right after storing the value of emailInput in emailSubmitted:

<input v-model="emailInput">
<button @click="emailSubmitted = emailInput; emailInput = ''">
  Sign up
</button>
<!-- left panel -->
<div>Submitted email: {{emailSubmitted}}</div>

As a result:

• When users input their data, it’s immediately stored in emailInput.
• When the button is clicked, the data is copied to emailSubmitted.
• Then emailInput is cleaned up so that the form is returned to its initial state.

# Beyond button

You can add event listeners to any container, not only to a <button>. This means that you can design your components freely with <div>s and still allow for interactivity. What’s even more important, clicking the child elements of the parent container that has an event listener will also trigger an event:

In this example, @click listeners are added to parent containers that contain multiple containers. Clicking anywhere on these parent containers or their children triggers the events:

<div @click="selectedContact = 'Joe Cole'">
  <div>Joe Cole</div>
  <div>Have they heard of Klimt anyway?</div>
</div>
<div @click="selectedContact = 'Michael B. Jordan'">
  <div>Michael B. Jordan</div>
  <div>No way! Thursday was supposed...</div>
</div>
<div @click="selectedContact = 'Linnea Berthelsen'">
  <div>Linnea Berthelsen</div>
  <div>You: sounds good!</div>
</div>

# Practice

# Product card

Allow users to switch between photos by clicking on small circles under the preview:

1. Fork your result of the task in the Displaying data article. You can also fork the prototype from the article.
2. Below the image, add 3 buttons with click event listeners.
3. On click, assign different URLs to imageUrl. The following images are used in the demo: light chair, darker chair, darkest chair.
4. Different images should be rendered according to which button users click.

# Profile information

Display information a user submits:

1. Fork your result of Profile information task in the Connecting to forms article. You can also fork the prototype from the article.
2. Create another set of variables to store submitted data. Display their values in the right column.
3. Add a Submit button with a click event listener. On click

• Assign the values of variables connected to form controls to variables used for displaying data.
• Clear the values of the variables connected to forms to clear the form.