[Vuejs]-Can a Vue ref name contain a space

by

0👍

The answer appears to be yes. I changed the ref name in the template to “newMedical School_fromDate” and the code worked as before. This is supported by looking at where the ref
name is used in the latest Vue source code (https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js), apparently in just the below function. Because “key” in refs[key] is specified with bracket notation, rather than dot notation, the
ref name does not have to be a valid Javascript identifier (which don’t allow for spaces).

  function registerRef (vnode, isRemoval) {
    var key = vnode.data.ref;
    if (!isDef(key)) { return }

    var vm = vnode.context;
    var ref = vnode.componentInstance || vnode.elm;
    var refs = vm.$refs;
    if (isRemoval) {
      if (Array.isArray(refs[key])) {
        remove(refs[key], ref);
      } else if (refs[key] === ref) {
        refs[key] = undefined;
      }
    } else {
      if (vnode.data.refInFor) {
        if (!Array.isArray(refs[key])) {
          refs[key] = [ref];
        } else if (refs[key].indexOf(ref) < 0) {
          // $flow-disable-line
          refs[key].push(ref);
        }
      } else {
        refs[key] = ref;
      }
    }
  }

Leave a comment