パラメータなしでVue 2のコンポーネント指示文をレンダリングする

Question

私は学生リストデータを保持するアプリケーションを持っています。コンポーネントはそのリストを取り込み、select2を使って選択ドロップダウンをレンダリングすることになっています。

fiddlesコンソールでは、jQuery is not definedと表示されています。私は今、すべてのfiddlesに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/を作成しました。 noobを助けてくれてありがとう！

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はあなたのフィディドのアップデートです。