Published on

Kiểm tra xem prop có được truyền giá trị hay không trong Vue

Authors

Trong quá trình phát triển ứng dụng với Vue, đôi khi bạn sẽ cần kiểm tra prop có được truyền từ bên ngoài component hay không. Bài viết này sẽ hướng dẫn bạn làm điều đó.

Vấn đề

Chúng ta có component Foo.vue

export default {
  name: 'Foo',
  props: {
    bar: {
      type: String,
      required: false,
      default: 'bar'
    }
  }
}

Và bạn sử dụng component này tại một nơi nào đó trong ứng dụng của bạn. Cả hai cách sau đều sẽ cho giá trị của propbarbar.

<Foo />
<Foo bar="bar" />

Vậy làm sao xác định khi nào propbarđược truyền giá trị từ ngoài, khi nào thì đang sử dụng giá trị mặc định?

Cách giải quyết

Các giá trị được truyền từ bên ngoài vào được lưu trong biếnthis.$options.propsData.

Để kiểm tra một prop có được truyền giá trị từ ngoài vào hay không thì bạn có thể làm như sau:

Object.keys(this.$options.propsData).some((prop) => prop === 'bar')

Ở đây,barchính là tên của prop cần kiểm tra.

© 2019-present by Le Minh Tri (@ansidev).