vee-validate hỗ trợ các đối tượng và mảng lồng nhau bằng cách sử dụng cú pháp tên trường để chỉ ra đường dẫn của trường. Điều này cho phép bạn dễ dàng cấu trúc các biểu mẫu để tạo ánh xạ dữ liệu đơn giản mà không phải xử lý các giá trị biểu mẫu phẳng
Bạn có thể chỉ định một trường được lồng trong một đối tượng bằng cách sử dụng các đường dẫn dấu chấm, giống như những gì bạn thường làm trong JavaScript để truy cập một thuộc tính lồng nhau.
js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
3 của trường đóng vai trò là đường dẫn cho trường đó trong các giá trị biểu mẫuvue
Submit
Gửi biểu mẫu trước đó sẽ dẫn đến các giá trị sau được chuyển đến trình xử lý của bạn
js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
Bạn không bị giới hạn ở độ sâu cụ thể, bạn có thể lồng bao nhiêu tùy thích
Mảng lồng nhau
Tương tự như các đối tượng, bạn cũng có thể lồng các giá trị của mình vào một mảng, sử dụng dấu ngoặc vuông giống như cách bạn thực hiện trong JavaScript
Đây là ví dụ tương tự như trên nhưng ở định dạng mảng
vue
Submit
Gửi biểu mẫu trước đó sẽ dẫn đến các giá trị sau được chuyển đến trình xử lý của bạn
js{
"links": [
"//twitter.com/logaretm",
"//github.com/logaretm"
]
}
vee-validate sẽ chỉ tạo các mảng lồng nhau nếu biểu thức đường dẫn là một số hoàn chỉnh, ví dụ: các đường dẫn như
js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
4 sẽ không tạo bất kỳ mảng nào vì khóa js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
5 không phải là số. Tuy nhiên, js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
6 sẽ tạo mảng với một đối tượng là mục đầu tiênTránh làm tổ
Nếu tên trường của bạn đang sử dụng ký hiệu dấu chấm và bạn muốn tránh hành vi lồng được bật theo mặc định, tất cả những gì bạn cần làm là đặt tên trường trong dấu ngoặc vuông [
js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
7] để vô hiệu hóa lồng cho các trường đóvue
Submit
Gửi biểu mẫu trước đó sẽ dẫn đến các giá trị sau được chuyển đến trình xử lý của bạn
vue
Submit
0Mảng trường v4. 5
Mảng trường là một loại trường mảng lồng nhau đặc biệt, chúng thường được sử dụng để thu thập các mẩu dữ liệu có thể lặp lại hoặc các dạng có thể lặp lại. Chúng thường được gọi là "trường lặp lại"
Không giống như API thành phần, có thể khó thiết lập một nhóm các trường có thể lặp lại với API thành phần trong cùng một thành phần. Điều này là do bạn thường cần một thành phần đầu vào để lặp lại
Đoạn mã sau sử dụng thành phần
js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
8 làm thành phần đầu vào, nhưng bạn có thể sử dụng bất kỳ thành phần nào miễn là chúng gọi nội bộ js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
9Để thiết lập trường có thể lặp lại, bạn có thể sử dụng
vue
Submit
0 để giúp bạn quản lý các hoạt động và giá trị mảngvue
Submit
4Đường dẫn mảng trường
Khi định sử dụng
vue
Submit
0, bạn cần cung cấp một giá trị js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
3 là đường dẫn của mảng bắt đầu từ giá trị biểu mẫu gốc, bạn có thể sử dụng ký hiệu dấu chấm cho đường dẫn đối tượng hoặc chỉ số cho đường dẫn mảngĐây là vài ví dụ
Lặp lại mảng
vue
Submit
3vue
Submit
8Lặp lại đối tượng
vue
Submit
4 bên trong đối tượng vue
Submit
5js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
1Phím lặp
Mục
vue
Submit
6 hiển thị thuộc tính vue
Submit
7, thuộc tính này là duy nhất và được tạo tự động cho bạn để bạn có thể sử dụng nó làm khóa lặpjs{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
4Thuộc tính
vue
Submit
7 được tạo tự động này rất thuận tiện vì bạn không còn phải cung cấp khóa duy nhất của riêng mình cho từng mụcTrình trợ giúp mảng
Hàm
vue
Submit
9 cung cấp các thuộc tính và hàm saujs
0. phiên bản chỉ đọc của các mục trường mảng của bạn, nó bao gồm một số thuộc tính hữu ích như{ "links": [ "//twitter.com/logaretm", "//github.com/logaretm" ] }
vue
7,Submit
js
2 và{ "links": [ "//twitter.com/logaretm", "//github.com/logaretm" ] }
js
3, giá trị mục thực tế nằm trong thuộc tính{ "links": [ "//twitter.com/logaretm", "//github.com/logaretm" ] }
js
4. Bạn nên sử dụng nó để lặp lại với{ "links": [ "//twitter.com/logaretm", "//github.com/logaretm" ] }
js
5{ "links": [ "//twitter.com/logaretm", "//github.com/logaretm" ] }
js
6. thêm một phần tử vào cuối mảng{ "links": [ "//twitter.com/logaretm", "//github.com/logaretm" ] }
js
7. thêm một mục vào đầu mảng{ "links": [ "//twitter.com/logaretm", "//github.com/logaretm" ] }
js
8. Chèn một mục mảng tại chỉ mục đã chỉ định{ "links": [ "//twitter.com/logaretm", "//github.com/logaretm" ] }
js
9. xóa mục có chỉ mục đã cho khỏi mảng{ "links": [ "//twitter.com/logaretm", "//github.com/logaretm" ] }
vue
0. Hoán đổi hai phần tử mảng theo chỉ số của chúngSubmit
vue
1. Thay thế toàn bộ giá trị mảng bằng các mục đã choSubmit
vue
2. Cập nhật giá trị mục mảng tại chỉ mục đã chỉ địnhSubmit
vue
3. Di chuyển một mục mảng đến một vị trí khác trong mảngSubmit
Đọc tài liệu tham khảo API để biết thêm thông tin
Hãy cẩn thận
Tạo và phá hủy đường dẫn
vee-validate tạo các đường dẫn bên trong dữ liệu biểu mẫu một cách tự động nhưng lười biếng, vì vậy ban đầu, các giá trị biểu mẫu của bạn sẽ không chứa giá trị của các trường trừ khi bạn cung cấp giá trị ban đầu cho chúng. Có thể đáng để cung cấp dữ liệu ban đầu cho các biểu mẫu của bạn bằng các đường dẫn lồng nhau
Khi các trường không được đếm như trong trường hợp các trường hiển thị có điều kiện với
vue
Submit
4 hoặc js{
"links": [
"//twitter.com/logaretm",
"//github.com/logaretm"
]
}
5, đường dẫn của chúng sẽ bị hủy ngay khi được tạo nếu chúng là trường cuối cùng trong đường dẫn đó. Vì vậy, bạn cần phải cẩn thận khi truy cập trường lồng nhau trong vue
Submit
6 bên trong trình xử lý nội dung gửi của mìnhViệc hủy đường dẫn có thể gây khó chịu khi xử lý biểu mẫu nhiều bước hoặc biểu mẫu theo thẻ mà bạn muốn tất cả các giá trị có sẵn ngay cả khi các trường không được đếm. Bạn có thể kiểm soát hành vi này bằng cách chuyển giá trị
vue
Submit
7 cho hàm js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
9 hoặc bạn có thể làm điều đó cho tất cả các trường bằng cách chuyển vue
Submit
9 cho hàm vue
Submit
00Lưu ý rằng mức độ ưu tiên của cấu hình này tuân theo cấu hình trường trước, sau đó nó sẽ chuyển sang cấu hình của biểu mẫu
js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
0js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
1Lỗi tham chiếu
Khi tham chiếu lỗi sử dụng đối tượng
vue
Submit
01 được trả về từ hàm vue
Submit
00. Đảm bảo tham chiếu tên trường giống như cách bạn đặt tên trên đối số js{
"links": {
"twitter": "//twitter.com/logaretm",
"github": "//github.com/logaretm"
}
}
3 cho trường đó. Vì vậy, ngay cả khi bạn tránh lồng vào nhau, bạn phải luôn bao gồm các dấu ngoặc vuông. Nói cách khác, vue
Submit
01 không lồng vào nhau, chúng luôn phẳngCác trường lồng nhau với lược đồ xác thực
Vì vee-validate hỗ trợ nên việc tham chiếu các trường lồng nhau có thể khác nhau tùy thuộc vào cách bạn chỉ định lược đồ
Nếu bạn đang sử dụng yup, bạn có thể sử dụng các lược đồ
vue
Submit
05 hoặc vue
Submit
06 lồng nhau để cung cấp xác thực cho các trường lồng nhau của mình, đây là một ví dụ nhanh