Vue JS Directives and Event Handling 2

Question 1

What does the `v-model` directive do on a native `<input>` element?

Accepted Answer

Creates a two-way binding between the input's value and a data property

Answer

`v-model` on `<input>` is syntactic sugar for `:value="data"` + `@input="data = $event.target.value"`, keeping the data and input in sync.

Question 2

How do you apply multiple CSS classes conditionally using `v-bind:class`?

Accepted Answer

:class="{ active: isActive, error: hasError }"

Answer

Object syntax for `:class` adds a class when its value is truthy. `{ active: isActive, error: hasError }` applies `active` when `isActive` is true and `error` when `hasError` is true.

Question 3

What does the `.stop` event modifier do?

Accepted Answer

Calls event.stopPropagation() to prevent the event from bubbling up to parent elements

Answer

`.stop` calls `event.stopPropagation()`, preventing the event from bubbling up through the DOM to parent elements' listeners.

Question 4

How does `v-bind` with an array work for the `class` attribute?

Accepted Answer

:class="[baseClass, isActive ? 'active' : '']" applies all array items as classes

Answer

Array syntax for `:class` allows applying multiple classes. String items are always applied; conditional classes use ternary expressions or nested objects within the array.

Question 5

What is the purpose of key modifiers in Vue 3 event handling, e.g., `@keyup.enter`?

Accepted Answer

They filter keyboard events to only fire the handler when the specified key is pressed

Answer

Key modifiers filter keyboard events. `@keyup.enter` only calls the handler when the Enter key is released, avoiding the need for manual `event.key` checks in the handler.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Directives and Event Handling 2