Yêu cầu thg 10 6, 2020 2:11 SA 156 1 2
  • 156 1 2
+1

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

Chia sẻ
  • 156 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 CÂU TRẢ LỜI


Đã trả lời thg 10 6, 2020 2:51 SA
+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ứ 😃

Chia sẻ
Avatar iamfresher @benkyou
thg 10 6, 2020 3:00 SA

@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 😄

Avatar Mai Trung Đức @maitrungduc1410
thg 10 6, 2020 3:03 SA

@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)
}
Avatar iamfresher @benkyou
thg 10 6, 2020 3:04 SA

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

Avatar Mai Trung Đức @maitrungduc1410
thg 10 6, 2020 3:07 SA

@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>

Avatar Mai Trung Đức @maitrungduc1410
thg 10 6, 2020 3:08 SA

@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......
             }....
Avatar iamfresher @benkyou
thg 10 6, 2020 3:14 SA

@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 😄

Đã trả lời thg 10 6, 2020 2:19 SA
+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 đó.

Chia sẻ
Avatar iamfresher @benkyou
thg 10 6, 2020 2:24 SA

@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

Avatar WheeBoo @quanghung97
thg 10 7, 2020 8:40 SA

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

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí