Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Vue Js · Question Set
Forms, Inputs & Validation interview questions for placements and exams.
Questions
12
Included in this set
Subject
Vue Js
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for Vue Js.
v-model creates two-way binding between a form control and component state. In Vue 2 it syncs with a value prop and input/change events. In Vue 3 on native inputs it still binds directly, but on custom components it maps to modelValue and the update:modelValue event by default.
<input v-model="name" placeholder="Your name" />
For complete preparation, combine this set with full subject-wise practice for Vue Js. You can also explore other subjects and sets from the links below.
Expose a modelValue prop and emit update:modelValue when the internal value changes. This lets parent use v-model directly. You can also support multiple models with the v-model:foo syntax.
<!-- Child.vue -->
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({ modelValue: String })
const emit = defineEmits(['update:modelValue'])
function onInput(e){ emit('update:modelValue', e.target.value) }
</script>
<template><input :value="modelValue" @input="onInput"></template>Vue 3 allows multiple v-models by naming them, e.g., v-model:title and v-model:content. Use this to keep separate pieces of state in sync (like title and body) without packing into a single object.
<PostEditor v-model:title="title" v-model:content="content" />
Use @submit.prevent to stop default navigation, validate synchronously/async, then call an API. Handle loading and error states in component state and disable the submit button to prevent duplicate requests.
<form @submit.prevent="onSubmit"> <!-- fields --> <button :disabled="loading">Save</button> </form>
Start with HTML5 validation (required, min, pattern) and custom messages, then layer reactive rules via computed/watches. For complex forms or async rules (e.g., username availability), adopt libraries like VeeValidate or vuelidate for schema-based validation and error aggregation.
Debounce user input, call an API, then set an error state on the field based on the response. Cancel stale requests via AbortController or a request token to avoid race conditions, and show inline feedback and a neutral state while checking.
let ctrl: AbortController | null = null
async function checkEmail(email:string){
ctrl?.abort(); ctrl = new AbortController()
const res = await fetch(`/api/exists?email=${email}`, { signal: ctrl.signal })
state.emailError = (await res.json()).exists ? 'Email already used' : ''
}Keep per-field touched/dirty flags, render errors near inputs, and disable submit if there are blocking errors. Use ARIA attributes (aria-invalid, aria-describedby) and ensure clear messaging for accessibility. Summarize top-level errors on submit.
Use a file input and read files from the change event. Build a FormData payload and POST with fetch/axios. Reflect progress and validation (size/type) in component state. Do not bind files with v-model; manage them imperatively.
<input type="file" multiple @change="onFiles">
// JS
function onFiles(e:any){ const files = [...e.target.files] /* validate & upload */ }Pair labels with inputs via for/id, use fieldset/legend for groups, aria-invalid/aria-describedby for errors, and proper roles on custom widgets. Manage focus on submit errors and ensure keyboard navigation works across all custom inputs.
.lazy updates on change/blur instead of on each input, useful for text areas or costly validations. .number casts the value to a number (or NaN if invalid). .trim removes leading/trailing whitespace before assignment.
<input v-model.lazy="title" /> <input v-model.number="age" type="number" /> <input v-model.trim="email" />
For a single checkbox, it binds a boolean. For multiple checkboxes with the same v-model, it pushes/pulls values from an array. For radio buttons, it binds the selected radio’s value to a single scalar.
<input type="checkbox" v-model="isAdmin">\n<input type="checkbox" v-model="skills" value="js">\n<input type="checkbox" v-model="skills" value="vue">\n<input type="radio" v-model="level" value="junior">
Wrap the native input in a component and emit update:modelValue on a debounced timer. This decouples UI typing from model updates and avoids heavy computations on every keypress.
<script setup>
import { ref } from 'vue'
const props = defineProps({ modelValue: String, delay: { type: Number, default: 300 } })
const emit = defineEmits(['update:modelValue'])
let t: any
function onInput(e:any){ clearTimeout(t); t = setTimeout(() => emit('update:modelValue', e.target.value), props.delay) }
</script>
<template><input :value="modelValue" @input="onInput" /></template>