genSelect() — vue Function Reference

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

Function typescript WebPlatform WebCompiler calls 2 called by 1

Entity Profile

WebPlatform→ WebCompiler→ genSelect() — vue Function Reference

Dependency Diagram

graph TD
  31784304_125e_2f0a_0d77_c4b3ad8fa829["genSelect()"]
  f36954a8_e8f3_1232_73cb_dd1434e32bc1["model()"]
  f36954a8_e8f3_1232_73cb_dd1434e32bc1 -->|calls| 31784304_125e_2f0a_0d77_c4b3ad8fa829
  36fcfc37_216e_9f34_5a69_e976b9f178f6["genAssignmentCode()"]
  31784304_125e_2f0a_0d77_c4b3ad8fa829 -->|calls| 36fcfc37_216e_9f34_5a69_e976b9f178f6
  5f7b1ed1_7106_20e8_83d2_d329e3f4a814["addHandler()"]
  31784304_125e_2f0a_0d77_c4b3ad8fa829 -->|calls| 5f7b1ed1_7106_20e8_83d2_d329e3f4a814
  style 31784304_125e_2f0a_0d77_c4b3ad8fa829 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/compiler/directives/model.ts lines 119–135

function genSelect(
  el: ASTElement,
  value: string,
  modifiers?: ASTModifiers | null
) {
  const number = modifiers && modifiers.number
  const selectedVal =
    `Array.prototype.filter` +
    `.call($event.target.options,function(o){return o.selected})` +
    `.map(function(o){var val = "_value" in o ? o._value : o.value;` +
    `return ${number ? '_n(val)' : 'val'}})`

  const assignment = '$event.target.multiple ? $$selectedVal : $$selectedVal[0]'
  let code = `var $$selectedVal = ${selectedVal};`
  code = `${code} ${genAssignmentCode(value, assignment)}`
  addHandler(el, 'change', code, null, true)
}