vue Architecture Docs
Home / Function/ directive.componentUpdated() — vue Function Reference

directive.componentUpdated() — vue Function Reference

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

Function typescript WebPlatform RuntimeDirectives calls 4

Entity Profile

Dependency Diagram

graph TD
  1d37bd4d_fcd6_18b0_52a8_e66a80a8f659["directive.componentUpdated()"]
  19efae2b_a3f2_405b_58c2_27512ee8cbc6["setSelected()"]
  1d37bd4d_fcd6_18b0_52a8_e66a80a8f659 -->|calls| 19efae2b_a3f2_405b_58c2_27512ee8cbc6
  e209b0d9_ee94_da5d_14f4_499aa19837cb["looseEqual()"]
  1d37bd4d_fcd6_18b0_52a8_e66a80a8f659 -->|calls| e209b0d9_ee94_da5d_14f4_499aa19837cb
  433d7ea2_6f6c_47e7_74d8_d782032eccb2["hasNoMatchingOption()"]
  1d37bd4d_fcd6_18b0_52a8_e66a80a8f659 -->|calls| 433d7ea2_6f6c_47e7_74d8_d782032eccb2
  fabaaff6_c16e_ef0d_bb91_e97ee97681d5["trigger()"]
  1d37bd4d_fcd6_18b0_52a8_e66a80a8f659 -->|calls| fabaaff6_c16e_ef0d_bb91_e97ee97681d5
  style 1d37bd4d_fcd6_18b0_52a8_e66a80a8f659 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/directives/model.ts lines 53–74

  componentUpdated(el, binding, vnode) {
    if (vnode.tag === 'select') {
      setSelected(el, binding, vnode.context)
      // in case the options rendered by v-for have changed,
      // it's possible that the value is out-of-sync with the rendered options.
      // detect such cases and filter out values that no longer has a matching
      // option in the DOM.
      const prevOptions = el._vOptions
      const curOptions = (el._vOptions = [].map.call(el.options, getValue))
      if (curOptions.some((o, i) => !looseEqual(o, prevOptions[i]))) {
        // trigger change event if
        // no matching option found for at least one value
        const needReset = el.multiple
          ? binding.value.some(v => hasNoMatchingOption(v, curOptions))
          : binding.value !== binding.oldValue &&
            hasNoMatchingOption(binding.value, curOptions)
        if (needReset) {
          trigger(el, 'change')
        }
      }
    }
  }

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does directive.componentUpdated() do?
directive.componentUpdated() is a function in the vue codebase.
What does directive.componentUpdated() call?
directive.componentUpdated() calls 4 function(s): hasNoMatchingOption, looseEqual, setSelected, trigger.

Analyze Your Own Codebase

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

Try Supermodel Free