Home / Function/ model() — vue Function Reference

model() — vue Function Reference

Architecture documentation for the model() function in model.ts from the vue codebase.

Entity Profile

Dependency Diagram

graph TD
  604989de_6282_4011_dd2f_f80716675ba4["model()"]
  fba67da2_5967_6779_f088_36da3dcbd363["model.ts"]
  604989de_6282_4011_dd2f_f80716675ba4 -->|defined in| fba67da2_5967_6779_f088_36da3dcbd363
  ced6cf45_fe99_8f88_d4e1_59701feae04a["genSelect()"]
  604989de_6282_4011_dd2f_f80716675ba4 -->|calls| ced6cf45_fe99_8f88_d4e1_59701feae04a
  59fefc37_deab_068e_5567_c9461be61301["genCheckboxModel()"]
  604989de_6282_4011_dd2f_f80716675ba4 -->|calls| 59fefc37_deab_068e_5567_c9461be61301
  e0270395_cfcd_95be_7420_a465afa99bd7["genRadioModel()"]
  604989de_6282_4011_dd2f_f80716675ba4 -->|calls| e0270395_cfcd_95be_7420_a465afa99bd7
  07b4d6e7_52ba_9802_3ead_ef4ddd722b34["genDefaultModel()"]
  604989de_6282_4011_dd2f_f80716675ba4 -->|calls| 07b4d6e7_52ba_9802_3ead_ef4ddd722b34
  style 604989de_6282_4011_dd2f_f80716675ba4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/compiler/directives/model.ts lines 13–64

export default function model(
  el: ASTElement,
  dir: ASTDirective,
  _warn: Function
): boolean | undefined {
  warn = _warn
  const value = dir.value
  const modifiers = dir.modifiers
  const tag = el.tag
  const type = el.attrsMap.type

  if (__DEV__) {
    // inputs with type="file" are read only and setting the input's
    // value will throw an error.
    if (tag === 'input' && type === 'file') {
      warn(
        `<${el.tag} v-model="${value}" type="file">:\n` +
          `File inputs are read only. Use a v-on:change listener instead.`,
        el.rawAttrsMap['v-model']
      )
    }
  }

  if (el.component) {
    genComponentModel(el, value, modifiers)
    // component v-model doesn't need extra runtime
    return false
  } else if (tag === 'select') {
    genSelect(el, value, modifiers)
  } else if (tag === 'input' && type === 'checkbox') {
    genCheckboxModel(el, value, modifiers)
  } else if (tag === 'input' && type === 'radio') {
    genRadioModel(el, value, modifiers)
  } else if (tag === 'input' || tag === 'textarea') {
    genDefaultModel(el, value, modifiers)
  } else if (!config.isReservedTag(tag)) {
    genComponentModel(el, value, modifiers)
    // component v-model doesn't need extra runtime
    return false
  } else if (__DEV__) {
    warn(
      `<${el.tag} v-model="${value}">: ` +
        `v-model is not supported on this element type. ` +
        "If you are working with contenteditable, it's recommended to " +
        'wrap a library dedicated for that purpose inside a custom component.',
      el.rawAttrsMap['v-model']
    )
  }

  // ensure runtime directive metadata
  return true
}

Domain

Subdomains

Frequently Asked Questions

What does model() do?
model() is a function in the vue codebase, defined in src/platforms/web/compiler/directives/model.ts.
Where is model() defined?
model() is defined in src/platforms/web/compiler/directives/model.ts at line 13.
What does model() call?
model() calls 4 function(s): genCheckboxModel, genDefaultModel, genRadioModel, genSelect.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free