在没有参数的情况下在 Vue 2 中渲染组件指令 [英] Rendering a component directive in Vue 2 without params

问题描述

我有一个保存学生名单数据的应用.该组件应该接收该列表并呈现一个选择下拉列表(使用 select2).

在 fiddles 控制台中，它显示 jQuery is not defined.我以为现在所有的小提琴都包含 jQuery?

我真的不知道为什么这会破坏一切.我的指令有问题吗?我知道在 Vue 2.0 中他们删除了 params，但这应该足够了.如果有人关注我的代码，我们将不胜感激.

//定义组件var studentComponent = Vue.extend({道具:['学生']，数据(): {返回 {}},方法:{}，指令:{选择: {绑定:函数(){var self = this;var select = $('#select-student');select.select2();select.on('change', function () {console.log('嘿选择作品！');});},更新:函数(oldVal，newVal){var select = $('#select-student');select.val(newVal).trigger('change');}},},模板:`<div><选择参考 ="id="选择学生"v-选择><option value="0">选择学生</option><选项v-for="(student, index) 在学生中":value="student.id">{{ 学生姓名 }}</选项></选择>

`，});//注册组件Vue.component('students-component', studentComponent);//应用程序新的 Vue({el: '#app',数据: {学生们: [{名称:'杰克'，ID:0}，{名称:'凯特'，ID:1}，{名称:'索耶'，ID:2}，{名称:'约翰'，ID:3}，{名称:'戴斯蒙德'，ID:4}，]},});

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

解决方案

首先，正如我在评论中提到的，我建议您使用组件来执行此操作.但是，如果您不得不坚持使用指令，则无法在 bind 钩子中初始化 select2.你已经在 DOM 中定义了你的选项，所以你需要等到组件被插入来初始化它.

 指令:{选择: {插入:函数(el，绑定，vnode){var select = $(el);select.select2();select.on('change', function () {console.log('嘿选择作品！');});},},},

这里是您的小提琴更新.

I have an app that holds the student list data. The component is supposed to take in that list and render a select dropdown (with select2).

In the fiddles console, it's displaying jQuery is not defined. I thought all fiddles now included jQuery?

I'm really not sure why this is breaking the all together. Is there something wrong with my directive? I know with Vue 2.0 they removed params, but this should suffice. Any eyes on my code would be greatly appreciated.

// 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 },
    ]
  },
});

I made a fiddle https://jsfiddle.net/hts8nrjd/4/ for reference. Thank you for helping a noob out!

解决方案

First, as I mentioned in comments, I would suggest you do this with a component. If you had to stick with a directive, however, you can't initialize select2 in the bind hook. You've defined your options in the DOM, so you need to wait until the component is inserted to initialize it.

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

Here is an update of your fiddle.

这篇关于在没有参数的情况下在 Vue 2 中渲染组件指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！