v-model form control integration

v-model and Single-line Input Fields

v-model and single-line input fields

<template>
  <div>
    <!-- Text field binding -->
    <input v-model="textField"/>
    
    <!-- Display bound data -->
    <p>Text content: {{ textField }}</p>
  </div>
</template>

<script>
export default {
  // Initialize text input value as empty string
  data() {
    return {
      textField: ""
    }
  }
};
</script>

v-model and Multi-line Input Fields

v-model and multi-line input fields

<template>
  <div>
    <!-- Textarea binding -->
    <textarea v-model="textarea"></textarea>
    
    <!-- Display bound data with line break preservation -->
    <p style="white-space: pre-line;">Multi-line text content: {{ textarea }}</p>
  </div>
</template>

<script>
export default {
  // Initialize multi-line input value as empty string
  data() {
    return {
      textarea: "",
    }
  }
};
</script>

v-model and Checkbox Controls

v-model and checkbox controls

<template>
  <div>
    <!-- First option -->
    <input type="checkbox" value="Soccer" v-model="checkList"/> Soccer
    
    <!-- Second option -->
    <input type="checkbox" value="Basketball" v-model="checkList"/> Basketball
    
    <!-- Third option -->
    <input type="checkbox" value="Volleyball" v-model="checkList"/> Volleyball
    
    <!-- Display bound array data -->
    <p>{{ checkList }}</p>
  </div>
</template>

<script>
export default {
  // Initialize checkbox list as empty array
  data() {
    return {
      checkList: [],
    }
  }
};
</script>

v-model and Select Lists

::: vue-demo Integration of v-model with select lists

<template>
  <div>
    <!-- Multi-select binding -->
    <select v-model="selectList" multiple>
      <option>Soccer</option>
      <option>Basketball</option>
      <option>Volleyball</option>
    </select>
    
    <!-- Display bound array data -->
    <p>{{ selectList }}</p>
  </div>
</template>

<script>
export default {
  // Initialize multi-select list as empty array
  data() {
    return {
      selectList: []
    }
  }
};
</script>

v-model Modifiers

Common modifiers for v-model are lazy and trim. When binding data to forms, we can use these modifiers to control specific behaviors of the directive.

lazy Modifier

The effect of the lazy modifier is similar to property lazy loading. It updates the model value only when the user leaves the input field (e.g., on blur).
v-model.lazy

<template>
  <div>
    <!-- Text input with lazy binding -->
    <input v-model.lazy="textField"/>
    
    <!-- Display bound data -->
    <p>Text content: {{ textField }}</p>
  </div>
</template>

<script>
export default {
  // Initialize text input value as empty string
  data() {
    return {
      textField: ""
    }
  }
};
</script>

trim Modifier

The effect of the trim modifier is to remove leading and trailing spaces from bound text data. It automatically trims whitespace when updating the model value.
v-model.trim

<template>
  <div>
    <!-- Text input with trim binding -->
    <input v-model.trim="textField"/>
    
    <!-- Display bound data -->
    <p>Text content: {{ textField }}</p>
  </div>
</template>

<script>
export default {
  // Initialize text input value as empty string
  data() {
    return {
      textField: ""
    }
  }
};
</script>