Asked Jan 3rd, 2:06 AM 205 0 1
  • 205 0 1
+1

Vuejs: vấn đề bất đồng bộ

Share
  • 205 0 1

Chào mọi người, em đang làm về vuejs, em có hàm:

data() {
    return {
        subjects: []
    }
}
async getReports() {
    const subjects = await axios('/reports');
    this.subjects = subjects.data;
    this.loading = false;
    console.log(this.subjects)
},

ở hàm created, em có:

created() {
    this.getReports();
    console.log(this.subjects)
},

ở trong hàm getReports() thì nó lấy được đúng kết quả, còn ở trong hàm created()thì nó lại trả về rỗng. vậy cho em hỏi là tại sao ạ. và cách khắc phục là như thế nào ạ? em cám ơn!!!

Vũ Nguyễn @vunguyen10111995
Jan 3rd, 2:30 AM

bạn thử đặt trong mounted() xem sao.

0
| Reply
Share
Hai Nguyen Hong @hai2
Jan 3rd, 2:31 AM

@vunguyen10111995 mình đã thử rồi nhưng ở template bên trên, nó lại vẫn không nhận biết subjects đó. nó vẫn rỗng., không thể dùng được ở template bên trên. không biết tại sao

0
| Reply
Share
Vũ Nguyễn @vunguyen10111995
Jan 3rd, 2:35 AM

@hai2 ý mình là bạn gọi thẳng cái axios('/report') xong hàm mounted rồi set data luôn trong cái hàm then của nó thử xem, thay vì việc bạn phải gọi async await methods

0
| Reply
Share
Hai Nguyen Hong @hai2
Jan 3rd, 2:41 AM

@vunguyen10111995 mình cho vào mounted() xong console.log(this.subjects) thì nó là undefined luôn =)

0
| Reply
Share
Hai Nguyen Hong @hai2
Jan 3rd, 2:41 AM

1 ANSWERS


Answered Jan 3rd, 2:22 AM
Accepted
+4

khi e khai báo async getReports() thì kết quả trả về là một promise, nên khi e gọi this.getReports(); trong created thì nó vẫn chỉ là một promise thôi chứ chưa trả về kết quả.

e thử thay như này xem chạy được ko ?

async created() {
        await this.getReports();
        console.log(this.subjects)
    },
Share
Hai Nguyen Hong @hai2
Jan 3rd, 2:26 AM

@kiendinang em làm theo anh thì nó show ra kêts quả rồi, nhưng ở template bên trên, nó lại vẫn không nhận biết subjects đó. nó vẫn rỗng., không thể dùng được ở template bên trên ạ.

0
| Reply
Share
Hai Nguyen Hong @hai2
Jan 3rd, 2:28 AM

@kiendinang à mà em nghĩ khi mình gọi đến hàm this.getReports() rồi thì biến this.subjects đã được gán giá trị rồi nên ở hàm created chỉ show cái biến this.subjects là dc ạ?

0
| Reply
Share
Do Trung Kien @kiendinang
Jan 3rd, 2:37 AM

@hai2 anh ko rõ template của e show data như thế nào, nhưng nếu e đã log được this.subjects ở cả 2 function thì có nghĩa là nó đã được set đúng.

e thử show code template kèm logic vue component lên đây xem sao.

0
| Reply
Share
Hai Nguyen Hong @hai2
Jan 3rd, 2:39 AM

@kiendinang đây ạ

<tbody v-for="(subject, x) in subjects" :key="x">
                        <tr v-for="(n,index) in subject.day" :key="n">
                            <td>
                                <h3>{{ subject.name }}</h3>
                                ({{ subject.day }} day)
                                <hr>
                                <div>Day: {{ n }}</div>
                            </td>
                            <template v-if="subjects[x].reports[n - 1].day == n">
                                <td class="p-0 pl-1 pr-1">
                                    <div
                                        class="edittor"
                                        @click="edittingReport($event, subjects[x].reports[n - 1].id, 'content')"
                                        v-html="subjects[x].reports[n - 1].content"
                                    ></div>
                                </td>
                                <td class="p-0 pl-1 pr-1">
                                    <div
                                        class="edittor"
                                        @click="edittingReport($event, subjects[x].reports[n - 1].id, 'link')"
                                        v-html="subjects[x].reports[n - 1].link"
                                    ></div>
                                </td>
                                <td class="p-0 pl-1 pr-1">
                                    <div
                                        class="edittor"
                                        @click="edittingReport($event, subjects[x].reports[n - 1].id, 'test_link')"
                                        v-html="subjects[x].reports[n - 1].test_link"
                                    ></div>
                                </td>
                                <td class="p-0 pl-1 pr-1">
                                    <div
                                        class="edittor"
                                        @click="edittingReport($event, subjects[x].reports[n - 1].id, 'lesson')"
                                        v-html="subjects[x].reports[n - 1].lesson"
                                    ></div>
                                </td>
                                <td class="p-0 pl-1 pr-1">
                                    <div
                                        class="edittor"
                                        @click="edittingReport($event, subjects[x].reports[n - 1].id, 'status')"
                                        v-html="subjects[x].reports[n - 1].status"
                                    ></div>
                                </td>
                                <td class="p-0 pl-1 pr-1">
                                    <div v-html="subjects[x].reports[n - 1].review"></div>
                                </td>
                            </template>
                        </tr>
                    </tbody>```
0
| Reply
Share
Hai Nguyen Hong @hai2
Jan 3rd, 2:44 AM
Hai Nguyen Hong @hai2
Jan 3rd, 2:49 AM

@kiendinang tức là kết quả là:Screenshot from 2019-01-03 09-44-27.png và em show ra

subjects[x].reports[n - 1]

thì trả về json đúng.

{ "id": 1, "content": "sdfd sfsd f", "link": "sdf sd", "test_link": "sd fsdf sd", "lesson": "sdfsd", "status": "sd", "day": 1, "user_id": 4, "subject_id": 1, "created_at": "2019-01-02 00:00:00", "updated_at": "2019-01-02 00:00:00", "review_id": 1, "review": "fsdfsdfds" }

. nhưng

subjects[x].reports[n - 1].day

thì lại là k có giá trị

0
| Reply
Share
Do Trung Kien @kiendinang
Jan 3rd, 3:15 AM

@hai2 trên chrome console của e có hiện lỗi gì không ? số lượng reports trong mỗi subject có đúng bằng số subject.day không ?

0
| Reply
Share
Tiến Nguyễn Văn @tiennguyen98
Jan 3rd, 3:15 AM

@hai2 thử thêm v-if="subjects != undefined" xem anh

0
| Reply
Share
Hai Nguyen Hong @hai2
Jan 3rd, 3:17 AM

@kiendinang Screenshot from 2019-01-03 10-16-43.png

ở trên console báo lỗi này ạ

0
| Reply
Share
Hai Nguyen Hong @hai2
Jan 3rd, 3:18 AM

@tiennguyen98 đây là nó không đọc được day ở trong subjects[x].reports[n - 1] mà chú?

+1
| Reply
Share
Do Trung Kien @kiendinang
Jan 3rd, 3:22 AM

@hai2 lỗi này có nghĩa là bản thân cái subjects[x].reports[n - 1] của em đã không tồn tại rồi, e cần check lại xem vài điều:

  • dữ liệu đã trả về chưa? nếu trả về rồi (tức subjects có tồn tại) thì mới thực hiện v-for đối với subjects
  • check lại reports có tồn tại trong subject hay không ?
  • check lại số lượng report có bằng số lượng day hay không ?
  • ko cần thiết lắm nhưng có thể check thêm index khi for, kiểu dữ liệu trả về của các phần tử trong subjects (array or object) đã đúng hay chưa ?
0
| Reply
Share
Hai Nguyen Hong @hai2
Jan 3rd, 3:25 AM

@kiendinang vâng, em cám ơn anh, để em check lại ạ

0
| Reply
Share
Hai Nguyen Hong @hai2
Jan 3rd, 3:39 AM

@kiendinang em tìm ra lỗi rồi ạ, do dữ liệu report của em không có đủ các day nên những cái không có dữ liệu nó báo lỗi

0
| Reply
Share
Hai Nguyen Hong @hai2
Jan 3rd, 3:39 AM

@kiendinang em cám ơn anh ạ

0
| Reply
Share