vue Architecture Docs
Home / Function/ model() — vue Function Reference

model() — vue Function Reference

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

Function typescript WebPlatform RuntimeDirectives calls 5

Entity Profile

Dependency Diagram

graph TD
  14d3bb86_7a8d_fa98_8bf9_6d426675527b["model()"]
  d047fb26_d0a6_5703_c5d5_08311329c6e9["genComponentModel()"]
  14d3bb86_7a8d_fa98_8bf9_6d426675527b -->|calls| d047fb26_d0a6_5703_c5d5_08311329c6e9
  156644d3_91e1_dced_78a2_f8489a890589["genSelect()"]
  14d3bb86_7a8d_fa98_8bf9_6d426675527b -->|calls| 156644d3_91e1_dced_78a2_f8489a890589
  2a02b0ab_9034_a2f9_d310_cda75957f53b["genCheckboxModel()"]
  14d3bb86_7a8d_fa98_8bf9_6d426675527b -->|calls| 2a02b0ab_9034_a2f9_d310_cda75957f53b
  1a10f80b_54fb_898b_54fd_6eee5e4ca82a["genRadioModel()"]
  14d3bb86_7a8d_fa98_8bf9_6d426675527b -->|calls| 1a10f80b_54fb_898b_54fd_6eee5e4ca82a
  39292c26_0eea_5e4d_9de0_7137f2d3a979["genDefaultModel()"]
  14d3bb86_7a8d_fa98_8bf9_6d426675527b -->|calls| 39292c26_0eea_5e4d_9de0_7137f2d3a979
  style 14d3bb86_7a8d_fa98_8bf9_6d426675527b 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

Calls

Source

Frequently Asked Questions

What does model() do?
model() is a function in the vue codebase.
What does model() call?
model() calls 5 function(s): genCheckboxModel, genComponentModel, genDefaultModel, genRadioModel, genSelect.

Analyze Your Own Codebase

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

Try Supermodel Free