Asked Oct 6th, 2:11 AM 103 1 2
  • 103 1 2
+1

Lỗi không emit đc event từ child component sang parent component trong Vuejs

Share
  • 103 1 2

Mình đang dùng axios ở gọi api ở child component
Khi có errors, thì trong catch mình đang emit 1 event, để phía parent component biết.
Nhưng emit rồi, mà bên thằng cha ko listen đc.
Không thấy báo lỗi gì.
Ae nào biết vấn đề là gì ko ạ

axios
        .post(url, data)
        .then((res) => {
        })
        .catch((err) => {
          **this.$emit('has-error')**;
        })
        .finally(() => {
        });

À, mình có thử khi emit ở ngoài axios thì vẫn đc.

Cũng đã thử eit theo cách này mà ko đc ạ 😦

this.$nextTick(() => {
  self.$emit('close');
});

Cảm ơn mọi người!

2 ANSWERS


Answered Oct 6th, 2:51 AM
+3

làm gì có lỗi gì đâu nhỉ.

Mình đã thử demo trực tiếp, chạy ngon.

App.vue (parent):

<template>
  <div id="app">
    <ExampleComponent
      @has-error="hasError"  
    />
  </div>
</template>

<script>

import ExampleComponent from './ExampleComponent'
export default {
  components: {
    ExampleComponent
  },
  methods: {
    hasError(error) {
      console.log('Receive Error from child')
      console.log(error)
    }
  }
}
</script>

ExampleComponent.vue (child):

<template>
    <div class="container">
       Hello world
    </div>
</template>

<script>
import axios from 'axios'
    export default {
       mounted() {
            axios.get('httpsss://randomuser.me/api/')
            .then((response) => {
                console.log(response.data)
            }).catch(error => {
                this.$emit('has-error', error)
            }).finally(() => {
            })
        },
    }
</script>

Kết qủa:

Screenshot 2020-10-06 at 10.54.42.png

Bạn check lại khéo cái catch của bạn còn chưa chạy vào ấy chứ 😃

Share
iamfresher @benkyou
Oct 6th, 3:00 AM

@maitrungduc1410 cảm ơn câu trả lời của bạn nhé, mình check kĩ và nó chạy vào rồi bạn.

console.log('start emit');
 this.$emit('showPopup');
 console.log('end emit');

mình nghĩ chắc nó bị ảnh hưởng ở đâu đó rồi, gây ra exception. mình đang check lại diện rộng hơn 😄

+1
| Reply
Share
Mai Trung Đức @maitrungduc1410
Oct 6th, 3:03 AM

@benkyou thay vì check axios, bạn thử đoạn try/catch đơn giản và throw ra exception luôn xem:

try {
  throw new Error('This error from Child')
} catch(error) {
  this.$emit('has-error', error)
}
+2
| Reply
Share
iamfresher @benkyou
Oct 6th, 3:04 AM

@maitrungduc1410 cái này thì lại đc bạn ạ. mình đã thử nó ở ngoài axios thì vẫn đc 😄

0
| Reply
Share
Mai Trung Đức @maitrungduc1410
Oct 6th, 3:07 AM

@benkyou vậy thì bạn lại thử gọi vào 1 method ở chính component đó coi sao, check chắc chắn this vẫn trỏ về component hiện tại:

Child.vue:

<template>
    <div class="container">
       Hello world
    </div>
</template>

<script>
import axios from 'axios'
    export default {
       mounted() {
            axios.get('httpsss://randomuser.me/api/')
            .then((response) => {
                console.log(response.data)
            }).catch(error => {
                this.test()
            }).finally(() => {
            })
        },
       methods: {
              test() {
                      console.log('Hello Friend')
              }
       }
    }
</script>

+1
| Reply
Share
Mai Trung Đức @maitrungduc1410
Oct 6th, 3:08 AM

@maitrungduc1410 nếu đây là vấn đề thì bạn tạo 1 biến tên là self = this ở ngoài axios, rồi bên trong catch thì dùng self.emit

let self = this
axios.get('httpsss://randomuser.me/api/')
            .then((response) => {
                console.log(response.data)
            }).catch(error => {
                 self.emit......
             }....
+2
| Reply
Share
iamfresher @benkyou
Oct 6th, 3:14 AM

@maitrungduc1410 cả 2 gợi ý của bạn mình đều check thử rồi mà vẫn ko đc.
hình như mình đoán ra vấn đề nằm ở đâu rồi. để mình thử xem có đúng ko rồi mình báo lại nhé. cảm ơn support của bạn 😄

+2
| Reply
Share
Answered Oct 6th, 2:19 AM
+1

Lý do là những thay đổi trong dữ liệu sẽ kích hoạt rerender lại, không được đồng bộ hóa trên $nextTick. Và giá trị mới sẽ được gửi đến component child thông qua prop trong quá trình re-render của component parent. Bạn không nên sử dụng emit bên trong $nextTick đó.

Share
iamfresher @benkyou
Oct 6th, 2:24 AM

@quanghung97 vậy có cách nào khác ko pro? hiện tại đang ko emit đc sang cho parent 😦
Chính xác là emit rồi, mà parent ko listen đc.huhu

+1
| Reply
Share
WheeBoo @quanghung97
Oct 7th, 8:40 AM

@benkyou bạn xài $emit trong watch thử xem

0
| Reply
Share