Optional Chaining trong template Vuejs để tránh xảy ra lỗi?

Tại sao cần sử dụng

Khi chúng ta muốn hiển thị giá trị trong object ra template

Trong trường hợp này nếu thuộc tính user không tồn tại, trình duyệt sẽ báo lỗi

Và nó có thể khiến cho một một số component của thư viện UI không hiển thị, vậy nên có một cách đó là check if trước khi hiển thị

Nhưng mỗi lần phải check như vậy đối với các thuộc tính được lồng trong nhiều object thì nó sẽ trở thành như này

Rất dài dòng và mệt mỏi

Optional chaining là gì

Được giới thiệu trong ES2020 của javascript, optional chaining ?. giúp cho việc truy cập đến các phần tử trong object ngay cả khi object không tồn tại

Có 3 kiểu cú pháp trong đấy 2 kiểu gọi đến phần tử và 1 kiểu gọi đến phương thức trong object

Hiện tại optional chaining mới chỉ được hỗ trợ trên template của Vue 3, còn Vue 2 khi sử dụng sẽ báo lỗi

Nên mình sẽ hướng dẫn cách cài đặt để có thể sử dụng optional chaining trên template của Vue 2

Cài đặt biên dịch

Sử dụng thư viện vue-template-babel-compiler để biên dịch

Chạy lệnh để cài đặt

Cấu hình tại vue.config.js

Hoặc nếu sử dụng webpack để biên dịch vue

Với trường hợp sử dụng Unit test với Jest cũng cần phải cấu hình để có thể biên dịch được trên môi trường test

Lưu ý: phiên bản của vue-jest phải lớn hơn hoặc bằng 4.0.0 và jest nhỏ hơn hoặc bằng 26.6.3.

Sử dụng với template

Và bây giờ chúng ta chỉ cần viết thế này là trình duyệt không báo lỗi khi Error in render: "TypeError: Cannot read property 'name' of undefined" nữa

Nhưng trên màn hình lúc này thẻ p sẽ render ra undefined

Có một cách mọi người thường dùng là kết hợp với nullish coalescing operator để hiển thị ra giá trị rỗng thay vì undefined

Cách hay hơn là sử dụng v-text, nó sẽ kiểm tra giá thị rồi mới render ra thẻ p còn không thì sẽ không render, một directive rất hay nhưng lại bị rất nhiều người bỏ qua

Sự kết hợp hoàn hảo