Asked Oct 5th, 10:22 AM 110 0 2
  • 110 0 2
+1

Giải thích giúp e với! Thắc mắc về chức năng show modal của bootstrap trong vueJS

Share
  • 110 0 2

Chào mọi người.
Mình đang học VueJS và có thắc mắc sau mong mọi người giải đáp.
Mình có 1 danh sách list, và một form insert new (dạng modal popup).
Và vấn đề em muốn hỏi đang ở phần show modal. (e có sử dụng bootstrap ah).
Các bước em đang xử lý như sau ạ.

  1. Click button New sẽ hiển thị form insert.
  2. Nhập thông tin vào form, nhấn submit. modal sẽ ẩn đi và hiển thị loading ($('#id').modal('hide'));
  3. Server validate và trả lỗi về nếu có.
  4. Client nhận errors từ server, hiển thị lên modal. và gọi modal('show'), để show lại modal.

Lỗi của em đang gặp là ở dưới local, nó hoặt động ok.
Nhưng khi em triển khai trên server. thì gặp lỗi ở bước 4. sau khi modal đc show lên nó ngay lập tức bị ẩn đi. Mà em chưa hiểu lý do. Mong anh chị giải đáp.

$('#insertForm').modal('hide');
axios
        .post(url, data)
        .then((res) => {
            let data = res.data;
            if (data.status) {
                notify.success(data.message);
                this.form.reset();
                this.$emit('changeDetailList', data.data);
            } else {
                notify.error(data.message);
            }
        })
        .catch((err) => {
            this.form.errors.record(err.response.data.errors);
            $('#insertForm').modal('show');
        })
        .finally(() => {
            this.busy = false;
            common.hideLoading();
        });

P/s: em đã dùng 1 cách khác và xử lý đc rồi, nhưng vẫn còn lăn tăn về vấn đề em gặp trên server. mong anh chị giải đáp ạ.

Vũ Thành Long @longvt1912
Oct 6th, 8:00 AM

Bạn up đủ file vue này được không?. Thấy Axios global trông không hiểu lắm.

0
| Reply
Share
Ngân Kim @ngankim
Oct 7th, 10:49 AM

@longvt1912 axios global ko hiểu là thế nào bạn?
import nó vào thôi mà

0
| Reply
Share
Vũ Thành Long @longvt1912
Oct 8th, 12:42 AM

Phần code này thiếu bước 1: Click và hiển thị form như bạn mô tả ấy.

0
| Reply
Share
morikun @thanhnguyen
Oct 8th, 1:14 AM

@longvt1912 Bác chưa hiểu câu hòi thì phải.
Bạn ấy nói là nó đã chạy ổn định ở local.
Nhưng trên server nó ko show modal khi catch error.
Câu hỏi của bạn ấy là ở bước 4, khi gọi modal('show') mà nó chưa show, tại sao? (dưới local thì show mà trên server thì ko show đc.)

.catch((err) => {
            this.form.errors.record(err.response.data.errors);
            $('#insertForm').modal('show');
 })
+1
| Reply
Share
Vũ Thành Long @longvt1912
Oct 8th, 1:33 AM

@thanhnguyen mình thấy đoạn đó rất ổn nên nghĩ lỗi phát sinh từ phía trên những đoạn code này và ảnh hưởng đến this.busy, common ở finally.

0
| Reply
Share

2 ANSWERS


Answered Oct 8th, 1:28 AM
0

Không có đoạn code hoàn chỉnh nên mình đoán vấn đề ở chỗ finally. Do môi trường khác nhau nên phần này có thể không được hỗ trợ. Trong đó lại có

this.busy = false;
common.hideLoading();

Có thể nó ảnh hưởng đến modal không ? Tham khảo Doc từ Mozilla:

The axios docs mention it: Axios depends on a native ES6 Promise implementation to be supported.

Share
Fenomeno @phanvantan
Oct 12th, 8:58 AM
Answered Oct 15th, 9:20 AM
0

khi có lỗi nó nhảy vào catch => show modal => finish => hide modal, nên sẽ có hiện tương show lên rồi ngay lập tức bị ẩn đi. E sửa lại như ri sẽ ok hơn :

  1. Click button New sẽ hiển thị form insert.
  2. Nhập thông tin vào form, nhấn submit, hiển thị loading;
  3. Nếu có lỗi hiện thị trên modal, không có ẩn modal đi.
Share