Vuejs $emit 在函数的某些部分不起作用,而在其他部分起作用
Vuejs $emit doesnt work in some part of a function, and in other part works
我正在使用 vuejs3 并尝试从子组件发出事件。
子组件
<input type="button" v-if="edition_mode" @click="cancel()" class="btn btn-primary" value="Annuler">
[...]
cancel(){
if(this.new_sav){
this.$emit('test')
}else{
console.log('else')
this.$emit('test')
}
},
父组件
<div v-if="creation_form">
<h4>Ajout Nouveau Sav</h4>
<sav-form
:initial_data="null"
:li_product="li_product"
:new_sav="true"
:customer_id="data.customer.id"
@action="form_action"
@test="test()"/>
</div>
[...]
test(){
console.log('test emit works')
}
执行cancel()时,在if情况下$emit()正常工作,但在else情况下,只打印'else',不执行$emit。我在这里做错了什么?
我在子组件中也有几个按钮,在同一个 div 中,它们都调用不同的函数,但一些函数 'can' 发出事件而其他的则不能。
我不确定您遇到了什么问题,但它在下面的代码片段中运行良好。请看一下,如果还需要 clarification/discussion,请告诉我。
演示 :
Vue.component('child', {
template: '<div><button @click="cancel()">Trigger emit event from child!</button></div>',
data() {
return {
isValid: true
}
},
methods: {
cancel: function() {
this.isValid = !this.isValid;
if (this.isValid) {
console.log('valid');
this.$emit('test');
} else {
console.log('not valid');
this.$emit('test')
}
}
}
});
var vm = new Vue({
el: '#app',
methods: {
getTestEvent() {
console.log('Emit event from child triggered!');
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<child @test="getTestEvent"></child>
</div>
我正在使用 vuejs3 并尝试从子组件发出事件。
子组件
<input type="button" v-if="edition_mode" @click="cancel()" class="btn btn-primary" value="Annuler">
[...]
cancel(){
if(this.new_sav){
this.$emit('test')
}else{
console.log('else')
this.$emit('test')
}
},
父组件
<div v-if="creation_form">
<h4>Ajout Nouveau Sav</h4>
<sav-form
:initial_data="null"
:li_product="li_product"
:new_sav="true"
:customer_id="data.customer.id"
@action="form_action"
@test="test()"/>
</div>
[...]
test(){
console.log('test emit works')
}
执行cancel()时,在if情况下$emit()正常工作,但在else情况下,只打印'else',不执行$emit。我在这里做错了什么?
我在子组件中也有几个按钮,在同一个 div 中,它们都调用不同的函数,但一些函数 'can' 发出事件而其他的则不能。
我不确定您遇到了什么问题,但它在下面的代码片段中运行良好。请看一下,如果还需要 clarification/discussion,请告诉我。
演示 :
Vue.component('child', {
template: '<div><button @click="cancel()">Trigger emit event from child!</button></div>',
data() {
return {
isValid: true
}
},
methods: {
cancel: function() {
this.isValid = !this.isValid;
if (this.isValid) {
console.log('valid');
this.$emit('test');
} else {
console.log('not valid');
this.$emit('test')
}
}
}
});
var vm = new Vue({
el: '#app',
methods: {
getTestEvent() {
console.log('Emit event from child triggered!');
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<child @test="getTestEvent"></child>
</div>