Mendukung saling ketergantungan di VueJS

Saya ingin menambahkan beberapa ketergantungan yang menghubungkan antara props saya di komponen VueJS saya.

Misalnya dalam deklarasi komponen props saya, saya ingin menetapkan bahwa jika props ada, maka props lain harus diperlukan, tetapi tidak diperlukan sama sekali jika props sebelumnya tidak ada.

props: {
    url: {
      type: String,
      required: true,
    },
    isShared: {
      type: Boolean,
      default: false,
    },
    isSharedByOtherMember: {
      type: Boolean,
      default: false,
    },
    archivedId: {
      type: String,
      required: isSharedByOtherMember ? true : false, // This is not working, bit is there a way to do so ?
    },

Setelah membaca dokumen vuejs :

Perhatikan bahwa props divalidasi sebelum instance komponen dibuat, sehingga properti instance (misalnya data, komputasi, dll) tidak akan tersedia di dalam fungsi default atau validator.

Apakah ada cara untuk tetap melakukan ini dalam deklarasi props agar lebih mudah dibaca/dipahami setelahnya?

Terima kasih sebelumnya


vue.js vuejs2
person foufrix    schedule 13.07.2020    source sumber
comment
Saya menyarankan menggunakan nilai default untuk setiap prop dependen.   -  person AndrewShmig    schedule 13.07.2020

Jawaban (1)


arrow_upward
0
arrow_downward

Anda bisa menggunakan properti validator untuk prop.

Vue docs memiliki contoh ini: (https://vuejs.org/v2/guide/components-props.html#Prop-Validation)

// Custom validator function
propF: {
  validator: function (value) {
    // The value must match one of these strings
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
  }
}

Anda dapat menentukan metode validator di bagian Metode Vue.

Sesuatu seperti ini:

export default {
  props: {
    isSharedByOtherMember: {
      type: Boolean,
      default: false
    },
    archivedId: {
      type: String,
      default: null,
      required: false,
      validator: this.validateArchiveId(),
      errorMessage: 'Archived ID required when isSharedByOtherMember has value of true.'
    }
  },
  methods: {
    validateArchiveId () {
      return this.isSharedByOtherMember
    }
  }
}
person Olli Lappalainen    schedule 13.07.2020