Question

我有一个包含学生列表数据的应用。该组件应该接收该列表并呈现选择下拉列表（使用select2）。

在fiddles控制台中，它显示jQuery is not defined。我认为现在所有的小提琴都包括jQuery？

我真的不确定为什么这会打破这一切。我的指令有问题吗？我知道Vue 2.0他们删除了params，但这应该足够了。任何关注我代码的人都会非常感激。

// Define component
var studentsComponent = Vue.extend({
  props: ['students'],
  data(): {
    return {}
  },
  methods:{},
  directives: {
    select: {
        bind: function () {
        var self = this;
        var select = $('#select-student');

        select.select2();
        select.on('change', function () {
            console.log('hey on select works!');
         });
            },
      update: function (oldVal, newVal) {
        var select = $('#select-student');
        select.val(newVal).trigger('change');
      }
    },
  },
  template: `
    <div>
        <select
        ref=""
        id="select-student"
        v-select>
            <option value="0">Select Student</option>
            <option
            v-for="(student, index) in students" 
            :value="student.id">
            {{ student.name }}
            </option>
        </select>
    </div>
  `,
});

// Register component
Vue.component('students-component', studentsComponent);

// App
new Vue({
  el: '#app',
  data: {
    students: [
        { name: 'Jack', id: 0 },
      { name: 'Kate', id: 1 },
      { name: 'Sawyer', id: 2 },
      { name: 'John', id: 3 },
      { name: 'Desmond', id: 4 },
    ]
  },
});

我做了一个小提琴https://jsfiddle.net/hts8nrjd/4/以供参考。谢谢你帮助一个菜鸟！

Answer 1

首先，正如我在评论中提到的，我建议您使用组件执行此操作。但是，如果坚持使用指令，则无法在bind挂钩中初始化select2。您已经在DOM中定义了选项，因此您需要等到插入组件才能初始化它。

directives: {
    select: {
        inserted: function (el, binding, vnode) {
            var select = $(el);
            select.select2();
            select.on('change', function () {
                console.log('hey on select works!');
             });
        },
    },
},

Here是对你小提琴的更新。

在没有参数

1 个答案: