Vue Directives: v-if, v-for, and v-model Essentials Quiz Quiz

Challenge your understanding of Vue's core directives—v-if, v-for, and v-model—with scenario-based questions that test practical usage, syntax, and common pitfalls in template logic. Sharpen your Vue skills with targeted questions designed for optimal comprehension and retention.

1. Understanding v-if Usage

   Which code snippet properly toggles a paragraph’s visibility based on a Boolean variable called 'isVisible' using v-if?

   1. u003Cp v-if='isVisible'u003EThis is visibleu003C/pu003E
   2. u003Cp v.visible='isVisible'u003EThis is visibleu003C/pu003E
   3. u003Cp :v-if='isVisible'u003EThis is visibleu003C/pu003E
   4. u003Cp v.show='isVisible'u003EThis is visibleu003C/pu003E

   Explanation: The v-if directive is correctly used with the syntax v-if='isVisible', which conditionally renders the element when isVisible is true. The options v.show and v.visible are not valid Vue directives and won't work. The option :v-if uses a binding syntax that is unnecessary and incorrect for v-if. Only the first option reflects proper Vue syntax.

2. Iterating with v-for

   If you have an array 'fruits' and want to display each fruit in a list, which v-for syntax is correct in Vue templates?

   1. u003Cli v-for='(fruit, index) in fruits' :key='index'u003E{{ fruit }}u003C/liu003E
   2. u003Cli for='fruit of fruits' :key='fruit'u003E{{ fruit }}u003C/liu003E
   3. u003Cli v-for='fruit from fruits' key='fruit'u003E{{ fruit }}u003C/liu003E
   4. u003Cli v-for='index: fruit in fruits'u003E{{ fruit }}u003C/liu003E

   Explanation: The correct syntax for v-for in Vue is v-for='(item, index) in array', accompanied by a unique :key for better performance, such as :key='index'. The other options use incorrect syntax: 'from', 'index:', and 'of' are not valid, and missing the v-for directive or using 'key' instead of ':key' is invalid.

3. Using v-model for Two-Way Binding

   Given an input field bound to a data property 'username', which statement best demonstrates two-way data binding in Vue using v-model?

   1. u003Cinput v-bind:model='username'u003E
   2. u003Cinput model='username'u003E
   3. u003Cinput v-bind='username'u003E
   4. u003Cinput v-model='username'u003E

   Explanation: v-model is the dedicated directive for enabling two-way data binding with form inputs in Vue. v-bind only creates one-way binding, and v-bind:model is not a valid directive. The plain 'model' attribute is invalid in Vue. Only v-model achieves real two-way synchronization between the input and the data property.

4. Dynamic Conditions with v-if and v-else

   When rendering an element with v-if and another element with v-else, what must be true for Vue to handle the condition correctly?

   1. The v-if and v-else elements must be adjacent siblings in the template.
   2. The v-else attribute can only be used with v-for.
   3. The v-if attribute must be used on both elements.
   4. The v-else element can be nested inside the v-if element.

   Explanation: Vue requires that v-if and v-else elements are adjacent siblings so it knows which elements to toggle depending on the condition. Nesting v-else inside v-if, or using v-if on both, does not enable the intended alternate rendering. The statement that v-else can only be used with v-for is incorrect; v-else works with v-if conditions.

5. Avoiding Common v-for Key Issues

   Why should you avoid using array indexes as keys in v-for, and what is a better alternative?

   1. Indexes will prevent all data updates; class attributes work better.
   2. Indexes are required by Vue; using names instead breaks the app.
   3. Indexes convert lists to objects; no alternative exists.
   4. Indexes can lead to inefficient rendering; a unique identifier from the data should be used instead.

   Explanation: Using array indexes as keys may cause rendering inefficiencies and bugs during reordering or updates, because Vue can have trouble tracking elements correctly. Class attributes do not replace keys, and using names does not break the app—it's often preferred if unique. Indexes do not prevent data updates or convert lists to objects; these statements are inaccurate.