Mảng cho đối tượng lồng nhau JavaScript

Cú pháp của mã bạn đã đăng có vẻ đúng với tôi. Thật khó để nói vấn đề là gì

Đầu tiên, bạn có thể kiểm tra xem có tài liệu nào trong bộ sưu tập hay không bằng bộ lọc truy vấn
{ id: req.params.id }

Ngoài ra, hãy xác minh giá trị trong biến req.params.id

Tôi đã thử một số mã xác minh cú pháp bằng một ví dụ, trong mongosh, và nó hoạt động tốt

// Sample document:
{
  id: 1,
  history: [
    { name: "alpha", status: false },
    { name: "beta", status: true },
    { name: "zeta", status: false }
  ]
}
// Update method
db.test.updateOne[
  { id: 1 }, 
  { $set: { "history.$[elem].status": true } },
  { arrayFilters: [ { "elem.name": "zeta" } ] }
]

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. Trường

js{
  "links": {
    "twitter": "//twitter.com/logaretm",
    "github": "//github.com/logaretm"
  }
}

3 đóng vai trò là đường dẫn cho trường đó trong các giá trị biểu mẫu

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": "//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ên

Trá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

js{
  "links.twitter": "//twitter.com/logaretm",
  "links.github": "//github.com/logaretm"
}

Mả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 một 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ảng

vue
  
    

      

      Remove
    

    Add

    Submit
  

Đườ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
  

3

jsconst { remove, push, fields } = useFieldArray['users'];

Lặp lại đối tượng

vue
  
    
    

    Submit
  

4 bên trong đối tượng

vue
  
    
    

    Submit
  

5

jsconst { remove, push, fields } = useFieldArray['settings.dns.domains'];

Phí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ặp

vue
  
    

      
    
  

Thuộ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ục

Trình trợ giúp mảng

Hàm

vue
  
    
    

    Submit
  

9 cung cấp các thuộc tính và hàm sau

• js{
    "links": [
      "//twitter.com/logaretm",
      "//github.com/logaretm"
    ]
  }

  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ư

  vue
    
      
      
  
      Submit
    
  
  
  

  7,

  js{
    "links": [
      "//twitter.com/logaretm",
      "//github.com/logaretm"
    ]
  }

  2 và

  js{
    "links": [
      "//twitter.com/logaretm",
      "//github.com/logaretm"
    ]
  }

  3, giá trị mục thực tế nằm trong thuộc tính

  js{
    "links": [
      "//twitter.com/logaretm",
      "//github.com/logaretm"
    ]
  }

  4. Bạn nên sử dụng nó để lặp lại với

  js{
    "links": [
      "//twitter.com/logaretm",
      "//github.com/logaretm"
    ]
  }

  5

• js{
    "links": [
      "//twitter.com/logaretm",
      "//github.com/logaretm"
    ]
  }

  6. thêm một phần tử vào cuối mảng

• js{
    "links": [
      "//twitter.com/logaretm",
      "//github.com/logaretm"
    ]
  }

  7. thêm một mục vào đầu mảng

• js{
    "links": [
      "//twitter.com/logaretm",
      "//github.com/logaretm"
    ]
  }

  8. Chèn một mục mảng tại chỉ mục đã chỉ định

• js{
    "links": [
      "//twitter.com/logaretm",
      "//github.com/logaretm"
    ]
  }

  9. xóa mục có chỉ mục đã cho khỏi mảng

• vue
    
      
      
  
      Submit
    
  
  
  

  0. Hoán đổi hai phần tử mảng theo chỉ số của chúng

• vue
    
      
      
  
      Submit
    
  
  
  

  1. Thay thế toàn bộ giá trị mảng bằng các mục đã cho

• vue
    
      
      
  
      Submit
    
  
  
  

  2. Cập nhật giá trị mục mảng tại chỉ mục đã chỉ định

• vue
    
      
      
  
      Submit
    
  
  
  

  3. Di chuyển một mục mảng đến một vị trí khác trong mảng

Đọ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 kết xuất 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 giống như khi nó đượ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 vào trường lồng nhau trong

vue
  
    
    

    Submit
  

6 bên trong trình xử lý nội dung gửi của bạn

Việ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

vue
  
    
    

    Submit
  

7 chỗ dựa 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

js{
  "links.twitter": "//twitter.com/logaretm",
  "links.github": "//github.com/logaretm"
}

0

Lư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"
  }
}

0

js{
  "links": {
    "twitter": "//twitter.com/logaretm",
    "github": "//github.com/logaretm"
  }
}

1

Lỗi tham chiếu

Khi tham chiếu lỗi sử dụng đối tượng

js{
  "links.twitter": "//twitter.com/logaretm",
  "links.github": "//github.com/logaretm"
}

1 được trả về từ hàm

js{
  "links.twitter": "//twitter.com/logaretm",
  "links.github": "//github.com/logaretm"
}

0. Đả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,

js{
  "links.twitter": "//twitter.com/logaretm",
  "links.github": "//github.com/logaretm"
}

1 không lồng vào nhau, chúng luôn bằng phẳng

Cá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 đồ

js{
  "links.twitter": "//twitter.com/logaretm",
  "links.github": "//github.com/logaretm"
}

5 hoặc

js{
  "links.twitter": "//twitter.com/logaretm",
  "links.github": "//github.com/logaretm"
}

6 lồng nhau để cung cấp xác thực cho các trường lồng nhau của bạn, đây là một ví dụ nhanh

Làm cách nào để chuyển đổi mảng thành đối tượng lồng nhau trong JavaScript?

Phương thức nào được sử dụng để chuyển đổi mảng lồng nhau thành đối tượng trong JavaScript?

Làm cách nào để tạo đối tượng lồng nhau trong JavaScript?

Làm cách nào để truy cập các phần tử mảng lồng nhau trong JavaScript?