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 Directives calls 5

Entity Profile

Dependency Diagram

graph TD
  f36954a8_e8f3_1232_73cb_dd1434e32bc1["model()"]
  1a9231b2_4b29_3b21_f054_61241d85883c["genComponentModel()"]
  f36954a8_e8f3_1232_73cb_dd1434e32bc1 -->|calls| 1a9231b2_4b29_3b21_f054_61241d85883c
  31784304_125e_2f0a_0d77_c4b3ad8fa829["genSelect()"]
  f36954a8_e8f3_1232_73cb_dd1434e32bc1 -->|calls| 31784304_125e_2f0a_0d77_c4b3ad8fa829
  7539ecb1_c1db_6b0e_5a90_bbe9d998a079["genCheckboxModel()"]
  f36954a8_e8f3_1232_73cb_dd1434e32bc1 -->|calls| 7539ecb1_c1db_6b0e_5a90_bbe9d998a079
  dc49a23f_3673_17c2_d4ff_83744ff5f5a2["genRadioModel()"]
  f36954a8_e8f3_1232_73cb_dd1434e32bc1 -->|calls| dc49a23f_3673_17c2_d4ff_83744ff5f5a2
  7a357d2a_ca6b_0c68_87b1_045695805af9["genDefaultModel()"]
  f36954a8_e8f3_1232_73cb_dd1434e32bc1 -->|calls| 7a357d2a_ca6b_0c68_87b1_045695805af9
  style f36954a8_e8f3_1232_73cb_dd1434e32bc1 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