Vue自定义多选Select指令报错求助：TypeError问题排查

Hey there! Let's walk through the problems you're hitting with your first Vue custom directive—they're super common when moving from older Vue examples to modern versions, so don't worry.

First Error: TypeError: Cannot read property 'el' of undefined #

The root issue here is a Vue version mismatch. The jsFiddle example you referenced likely uses Vue 1.x, where directive hooks accessed elements via this.el. But in Vue 2.x and later, the API changed completely: directive hooks receive the bound DOM element as the first parameter, not through this.

Your original $(this.el) doesn't work because this in modern Vue directive hooks doesn't expose the element anymore—hence the "undefined" error.

Second Error: TypeError: Cannot read property 'params' of undefined #

When you switched to $('#el'), you fixed the element access (sort of—hardcoding an ID like #el makes the directive non-reusable), but hit another version mismatch issue. this.params is also a Vue 1.x feature. In modern Vue, any parameters or values passed to your directive are stored in the binding object (the second parameter in directive hooks).

Fixes & Correct Implementation #

Here's how to rewrite your global custom directive to work with Vue 2.x+/3.x (adjust slightly if using Vue 3, but core logic is similar):

// In your separate global directive JS file
Vue.directive('multi-select', {
  // Runs when the directive is first bound to the element
  inserted(el, binding, vnode) {
    // Use the el parameter directly (no this!)
    const $selectElement = $(el);
    
    // Access passed values via binding.value (replace with your actual params)
    const selectOptions = binding.value;

    // Initialize your multi-select logic here
    $selectElement
      .attr('multiple', true)
      .on('change', function() {
        // Sync selected values back to the Vue component
        const selected = $(this).val();
        vnode.context[binding.expression] = selected;
      });

    // Populate options (adjust based on your original logic)
    selectOptions.forEach(option => {
      const $option = $('<option>').val(option.value).text(option.label);
      $selectElement.append($option);
    });
  },

  // Clean up when the directive is unbound
  unbind(el) {
    $(el).off('change');
  }
});

Then use it in your component like this:

<template>
  <select v-multi-select="myOptions" v-model="selectedItems"></select>
</template>

<script>
export default {
  data() {
    return {
      myOptions: [
        { value: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' }
      ],
      selectedItems: []
    };
  }
};
</script>

Key Takeaways #

1. Forget this.el and this.params: In modern Vue, directive hooks get el (DOM element), binding (values/params passed to the directive), and vnode (Vue virtual node context) as parameters.
2. Avoid hardcoded IDs: Using $('#el') makes your directive only work for one element. Use the el parameter instead to keep it reusable.
3. Check Vue version docs: Always cross-reference the Vue docs for your version when writing directives—API changes between 1.x and 2.x+/3.x are significant.

内容的提问来源于stack exchange，提问作者wenus