04_04 Other Directives

Lifecycle Events

Sometimes you'll want to take care of things at certain

Binding classes

Connect classes to variables

<div v-bind:class="{ myClass: myBoolean }"></div>

• v-bind optional
• Control state
• Toggle classes on/off

Class-binding means connecting your classes to the variables in the data section of your script.

The variables in that section is sometimes called the state of your app.

Just as you'd expect, you can use the v-bind directive with the class attribute, and of course, the v-bind keyword is optional, so you can just use :class

This is a simple way of toggling a class on and off depending on the value of a boolean variable.

So, we could assign this to a class named lead, which is a valid class from the bootstrap framework class, or a class named display-2. If the class has a hyphen, then you need to put the names in quotes because hypens aren't valid in JavaScript names.

Using Objects

<div class="myClass" :class="{ 'class-one': booleanOne, 'class-two': booleanTwo }"></div>
...
data() {
  return {
    booleanOne: true,
    booleanTwo: false
  }
}

<div class="myClass class-one">

Because this is JavaScript, you don't need to pass a single value, it can be an object with a list of boolean variables, whose values will toggle the different classes.

You can also have add a class attribute in your HTML tag while using a variable or object. What would happen is that myClass here would always be applied and the other classes would be added or removed depending on the values of the variables..

So if we had an example like this, it would render a div tag with the class named myClass. Because booleanOne is true, then the div would have the class-one class as well, but not the class-two class.

Classes as data

<div class="myClass" :class="myObject"></div>
...
data() {
  return {
    myObject: { 
      'class-one': true,
      classTwo: false
    }
  }
}

If you're passing along a lot of variables, it might be more convenient to create a separate object in your data section, which will make thing easier to find and maintain.

JavaScript doesn't allow hypens in variable names, so if the class name doesn't have a hyphen, you don't need to use the quotes on the left part of the statement.

Classes as Computed Properties

<div class="myClass" :class="myObject"></div>
...
data() {
  return {
    myObject: { 
      'class-one': true,
      'class-two': false
    }
  }
}

Passing Arguments

<div @event="myMethod(someVar, $event)"></div>
...
methods: {
  myMethod(myVar, myEvent) {
    console.log(myEvent.target)
  }
}

Of course you can also pass variables to the method if you want. If you still need to pass event info, you can send it with a special variable callend $event.

You can then capture that event into a javascript variable on your function.

Multiple Methods

<div @event="firstMethod, secondMethod"></div>

You can also have an event run multiple methods by separating them like arguments with commas.

Event Modifiers

.stopStop propagation .preventPrevent default behavior .captureCapture an inner element .self Only trigger on self events.onceTrigger only once
.passiveDon't call preventDefault

<div @event.stop.prevent="myMethod"></div>

Docsmzl.la/36EDIhg

You can add one or more modifiers that control how the events are handled. These events are similar to the options you'd pass to a javascript event listener. So for example you can use prevent to stop a form from submitting.

You can pass along multiple modifiers, but be careful because the order makes a difference.

For more information look at the documentation for event listener parameters.

Key Modifiers

.enter .tab .delete .esc
.space .up .down .left .right

ctrl alt shift meta

<input @keyevent.ctrl.enter="submit" />

Some of the key methods have their own special modifiers

Note: the meta key is the command key on a mac and the windows key on a PC.

exact modifier

.exact

<div @event.modifier.exact="myMethod">A</div>

<button @click.ctrl.exact="myMethod">A</button>

There's a special modifier called exact. If you add it to an event, then it will only trigger our script if the combination matches exactly.

For example here, it would only execute myMethod if the ctrl key was pressed when the button was clicked. If you removed the modifier, then the method would only be called if no keys were pressed.

Mouse Modifiers

.left .right .middle

You can also check for clicks on specific buttons with the mouse button modifiers.

Docsbit.ly/3npgqSo

Practice

1. Create a cart array
2. Click plus to add items
3. Display cart items
4. Make cart icon toggle menu

bonus: Show cart total and qty on menu

Here's a good practice project. Here's the link to the starting code.

I have a simpler version of our previous code that displays our items.

First, create a currency filter that formats the number used for pricing so that they all have consistent decimal points. Apply that filter to the pricing of each item.

Next we want to display the amount of items the user has filtered when they change the max price.

However the original array never changes, but you can filter the array based on the choice and calculate the quantity properly.

That means that we'll need to change the array we're using in v-for with our new array.

It also means that we can remove the v-if statement that filters our display.

Use the new filtered array to display a label with the amount of elements based on the value of max.