前提・実現したいこと
Vue.js超初心者です。
現在、dropdown機能を実装しています。
ネストは再帰処理で行っているのですが、再帰で呼んでいるコンポーネントに定義しているrefが見つからないとエラーが出てしまいます。
原因がわからず、わかる方ご助言ください。以下、ソースコードです。
発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read property 'aaa' of undefined at VueComponent.mouseover
該当のソースコード
JavaScript
1Vue.component('dropdown-group',{ 2 template:` 3 <ul ref='my-ul'> 4 <li v-if='item.children' v-for='item in value'> 5 <a @mouseover='mouseover'>parent: {{item.label}}</a> 6 <dropdown-group :value='item.children' ref='aaa'/> 7 </li> 8 <li v-else> 9 <a>child: {{item.label}}</a> 10 </li> 11 </ul> 12 `, 13 props: { 14 value: { 15 type:Array, 16 }, 17 }, 18 methods: { 19 mouseover: function() { 20 //ここでエラー 21 $($(this).$refs.aaa).$emit('open-ul'); 22 }, 23 mouseout: function() { 24 $($(this).$refs.aaa).$emit('close-ul'); 25 } 26 }, 27 model: { 28 29 }, 30 computed: { 31 32 }, 33 mounted: function() { 34 $('div.dropdown ul').addClass('hide'); 35 $('div.dropdown > ul').attr('aria-labelledby', 'drop').addClass('dropdown-menu').removeClass('hide sidedown-menu'); 36 $(this).on('open-ul', function(){ 37 $(this.$refs['my-ul']).removeClass('hide') 38 $(this.$refs['my-ul']).addClass('show sidedown-menu') 39 }); 40 $(this).on('close-ul', function(){ 41 $(this.$refs['my-ul']).removeClass('show sidedown-menu') 42 $(this.$refs['my-ul']).addClass('hide') 43 }); 44 } 45})
補足情報(FW/ツールのバージョンなど)
開発ライブラリ情報
依存ライブラリ
jQuery3.3.1
vue.js 2系
bootstrap 3.3.7
$emit は vue インスタンスのメソッドを意図していますか?また jQuery と vue を併用しているのは理由があるのでしょうか。
回答2件
あなたの回答
tips
プレビュー