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

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'
    }
  }
}
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 prop bar là bar.

<Foo />
<Foo />

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

Vậy làm sao xác định khi nào prop bar đượ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ến this.$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')
Object.keys(this.$options.propsData).some((prop) => prop === 'bar')

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