Khang

Bài viết này sẽ trả lời cho câu hỏi của bạn và những câu hỏi tương tự khác nếu có https://viblo.asia/p/hoc-regular-expression-va-cuoc-doi-ban-se-bot-kho-updated-v22-Az45bnoO5xY

Package này không hỗ trợ yêu cầu của bạn rồi, bạn phải tự custom lại thôi. Một trong những cách giải quyết theo hướng sử dụng showCalendar của bạn là gắn thêm hàm xử lý (vd "onClickOutside") vào event click của document, trong hàm này check nếu user click ra ngoài cái datepicker thì bạn gọi

this.$refs.picker.close()

Bạn có thể dùng tab network trong devtool của trình duyệt để check các request nào được gọi trong trang. Trường hợp ít hoặc ko có request nào thì tức website được thiết kế theo kiểu server-side rendering, nếu họ ko public API thì ko có cách nào để lấy API (hoặc có thể có nhưng nằm ngoài hiểu biết của mình).

1. v-for bạn đặt trong option mới đúng nha (đọc thêm: https://vi.vuejs.org/v2/guide/list.html)
2. Ở đây mình thấy bạn đặt nhomcon trong thẻ select sẽ không có tác dụng gì. Thẻ select chỉ đi với thẻ option, còn nhomcon là một component bạn viết riêng bằng Vue.
3. Mính góp ý thêm là bạn nên tìm hiểu thêm về các thuật ngữ như "hàm", "đệ quy", "vòng lặp" để đặt câu hỏi chính xác hơn.

Bạn đặt ngôn ngữ theo URL path là được, window.navigator.language thì dùng cho trường hợp mặc định. Vd:

const langFromPath = location.pathname.split("/")[1];
const hasLang = langFromPath.length === 2; // nếu path có dạng: abc.com/xx/something-else
const siteLang = hasLang ? langFromPath : navigator.language;

Keyword là lazy loading nha bạn.

Cụ thể cách trang shopee thực hiện ở đây là họ tạo 1 div chồng lên ảnh gốc, trong div này họ set thuộc tính backgroung-image với 1 ảnh nhỏ loại svg nên chắc chắn sẽ ko mất bao nhiêu ms để load ảnh này vào div, sau khi ảnh gốc được load xong thì chỉ việc xóa div này đi. Bước xóa div được xử lý trong sự kiện onload của thẻ <img />.

Bạn có thể đặt thuộc tính css "pointer-events: none" vào body hoặc root. Nhưng thường chỉ cần khóa button login đi là đủ, vì người dùng có click đi đâu cũng ko ảnh hưởng request auth đã gửi - họ vẫn sẽ được tự động redirect về trang chủ (hoặc lý tưởng hơn là trang đang truy cập) sau khi login thành công.

Thay vì bỏ thời gian để làm lại một thư viên y chang chi bằng bạn đọc và nghiên cứu kỹ cách sử dụng nó rồi tạo một wrapper bằng jQuery để sử dụng lại nó thôi

Bạn lưu giá trị ban đầu của các ô input trong form vào một object rồi bắt sự kiện input của form để so sánh. Bạn tham khảo thử code của mình xem áp dụng được không:

Bạn có thể gắn id sản phẩm đó vào href của link hoặc button, khi click thì chuyển sang trang thông tin chi tiết, lấy id từ URL rồi gọi API bằng id đó. Ví dụ như:

<ul>
  <li><a href="/detail?id_book=0">Chi tiết</a></li>
  <li><a href="/detail?id_book=1">Chi tiết</a></li>
  ...
</ul>

<script>
const bookId = new URLSearchParams(location.search).get("id_book");
fetch(`api/v1/book/?id_book=${bookId}`).then(...)
</script>

Mọi thứ đặt trong public thì src sẽ không truy xuất được, và ngược lại. Hiểu đơn giản là 2 cái nó thuộc 2 thế giới, những gì trong folder src sẽ được build ra thư mục dist/build, còn những gì trong folder public sẽ chỉ được copy sang build/dist thôi.

Còn lỗi trong hình thì bạn có thể thử 2 cách sau:

• Nếu muốn dùng hình trong thư mục public/image thì phải sửa đường dẫn lại thành image/next-pre_icon/preIcon.png.
• Nếu muốn dùng hình trong thư mục src/assets/image thì bạn phải import nó vào như một module (để webpack chuyển thành đường dẫn), rồi chèn module này vào thuộc tính src của img. Bạn đọc thêm ở đây nếu chưa rõ: https://create-react-app.dev/docs/adding-images-fonts-and-files

Theo mình thì cách của bạn không cần sử dụng thư viện ngoài. React-i18next chỉ hữu ích khi các bước localize bạn thực hiện hoàn toàn trên phía client (+ quen với hệ sinh thái i18next), còn sử dụng dữ liệu đa ngữ từ BE thì có thể áp dụng các cách đơn giản, truyền thống như của bạn.

Nhìn chung thì nên nghiêng về giải pháp đơn giản và ko lệ thuộc thư viện ngoài nếu có thể 👍

Về cách implement bằng Laravel thì mình ko rõ, nhưng giải pháp chung đối với trường hợp sử dụng nhiều file CSS thì mình thường thấy như sau:

• File CSS 1 chứa theme cũ
• File CSS 2 chứa theme mới
• Bọc một class ngoài cùng cho file CSS 2, ví dụ:

.custom-theme body { }
.custom-theme section { }
.custom-theme .header { }
...

• Xử lý event switch giao diện đơn giản chỉ cần thêm class .custom-theme vào thẻ body hoặc root nào đó là được.

Sau khi build mà trang index.html của bạn trắng không tức là có vấn đề về đường dẫn đến các file JS, bạn mở thử console xem đúng như mình nói không. Nếu đúng thì giải pháp là trong file package.json, bạn thêm "homepage": "." vào để chỉnh lại đường dẫn, sau đó build lại.

Dùng !important như cách trên, hoặc dùng lại đúng các class cha chứa .content, ở đây là .hero-banner .slider .slide .content-holder .content

Trên stackoverflow cũng có câu hỏi tương tự, bạn tham khảo thử xem có solution nào phù hợp: https://stackoverflow.com/q/50332119

JavaScript là ngôn ngữ xử lý từ phía client (tức web browser như Chrome, Firefox, Edge...), còn ASP.NET Core là framework xử lý phía server. Bạn muốn gửi dữ liệu/request từ client qua server thì cần có một controller để xử lý request và trả về response tương ứng.

Bạn có thể tham khảo code mẫu tại đây (lưu ý chỉ là code mẫu, cách code cũng tùy framework): https://www.codeproject.com/Tips/832696/How-to-send-Data-from-JavaScript-to-Csharp-Server.