我正在尝试将事件从子组件发送到父组件，但我收到了以下错误
未捕获的TypeError：fns.apply不是函数 在VueComponent.invoker（http://searchapp.local/js/app.js:40036:18） 在VueComponent.Vue。$ emit（http://searchapp.local/js/app.js:40505:16） 在VueComponent.e。（匿名函数）[as $ emit]（chrome-extension：//nhdogjmejiglipccpnnnanhbledajbpd/build/backend.js：1：6408） 在VueComponent.showModal（http://searchapp.local/js/app.js:14549:12） 在boundFn（http://searchapp.local/js/app.js:38463:14） 在HTMLButtonElement.invoker（http://searchapp.local/js/app.js:40036:18）invoker @ app.js：40036 Vue。$ emit @ app.js：40505 e。（匿名函数）@backend.js：1 showModal @ app.js：14549 boundFn @ app.js：38463 invoker @ app.js：40036
我的孩子组件是这样的
https://jsfiddle.net/95LqLr6o/
父组件就是这个
https://jsfiddle.net/9Lh05Ltp/
代码 Child Componenet
<template>
<div class="col-md-3 col-sm-3 col-xs-3 pad">
<button class="btn btn-primary btn-sm pull-right view_btn1" data-cardpos="0" type="button" @click="showModal" ><i class="fa fa-eye"></i></button>
</div>
</template>
<script >
export default {
props:['rates','card'],
name:'card',
data(){
return {
// rates
}
},
methods:{
showModal(){
this.$emit('show_modal1');
}
}
}
</script>
代码父组件
<template>
<div>
<div class="wrapper wrapper-content">
<div class="row">
<card1 v-for="(card, index) in cardList" :key="index" :card="card" :rates="card.rates" v-if="index < 6 " v-on:show_modal1="showModal" >
</card1>
</card>
</div>
</div>
<modal></modal>
</div>
</template>
<script>
import createCardList from '../core/searchableCards';
import modal from '../components/modal.vue';
import card1 from '../components/Card-row-top.vue';
export default {
components: {
card1,card,modal
},
mounted() {
console.log('Component mounted :: Results');
console.log(this.$store.state.cards_search_query);
},
created(){
this.form.submit('get',this.$store.state.cards_search_query)
.then(data => {
toastr.success('Data loaded successfully');
this.dataList = data;
this.getCardList();
})
.catch(errors => console.log(errors));
},
data(){
return {
cardList:[],
form: new Form({}),
dataList:[],
createCardList,
rates:[],
showModal:false
};
},
methods : {
showModal(){
console.log('Modal opened');
this.showModal = true;
$('#getModal').modal('show');
},
getCardList()
{
var that = this;
var urlForAjax = '/wfengine/promotions';
console.log('getCardList');
this.form.submit('get',urlForAjax)
.then(res => {
toastr.success('Data loaded successfully');
this.cardList = createCardList(that.dataList,res);
console.log(this.cardList);
})
.catch(errors => console.log(errors));
}
}
}
</script>
<style type="text/css">
.back_tbl {
max-height: 109px !important;
overflow: auto !important;
}
</style>