Special cases

Read first

Understanding How is metaInfo resolved? is probably a prerequisite for these cases

Remove parent property by child

If a child returns null as content value then the parent metaInfo property with the same vmid will be ignored

Content value

With content value we mean the following value of a metaInfo property:

  • the value of a key for object types as htmlAttrs
  • the value of [contentKeyName] or innerHTML keys for collection types as meta

The following might be a bit far-fetched, but its just an example

  1. // parent
  2. metaInfo: {
  3.   style: [{
  4.     vmid: 'page-load-overlay',
  5.     innerHTML: `
  6.       body div.loading {
  7.         z-index: 999;
  8.         background-color: #0f0f0f;
  9.         opacity: 0.9;
  10.       }
  11.     `,
  12.   }]
  13. }
  15. // dynamically loaded child
  16. metaInfo() {
  17.   const style = this.cssTexts
  18.   return { style }
  19. },
  20. data() {
  21.   return {
  22.     this.cssTexts: []
  23.   }
  24. },
  25. mounted() {
  26.   this.cssTexts.push({
  27.     vmid: 'page-load-overlay',
  28.     innerHTML: null
  29.   })
  30. }

Use child property conditionally

If you wish to use a child property conditionally and use the parents' property as default value, make sure the child returns undefined as content value

Content value

With content value we mean the following value of a metaInfo property:

  • the value of a key for object types as htmlAttrs
  • the value of [contentKeyName] or innerHTML keys for collection types as meta

The below example will still show a description when the GET in the child fails

  1. // parent
  2. metaInfo: {
  3.   meta: [{
  4.     vmid: 'description',
  5.     name: 'description',
  6.     content: 'my standard description',
  7.   }]
  8. }
  10. // child
  11. metaInfo() {
  12.   return {
  13.     meta: [{
  14.       vmid: 'description',
  15.       name: 'description',
  16.       content: this.description,
  17.     }]
  18.   }
  19. },
  20. data() {
  21.   return {
  22.     description: undefined
  23.   }
  24. },
  25. methods: {
  26.   getDescription() {
  27.     this.description = this.$axios.get()
  28.     if (!this.description) {
  29.       // if GET request failed or returned empty,
  30.       // explicitly set to undefined so the parents'
  31.       // default description is used
  32.       this.description = undefined
  33.     }
  34.   }
  35. }

Boolean attributes

vue-meta maintains a listSpecial cases - 图1 of attributes which are Boolean attributes according to the HTML specs (and some extra). Whatever value you will pass to these attributes, they will be rendered as a Boolean attribute.*

*Except for the special values undefined and null, see above

Note

Prior to v2.0 any attribute key with undefined as value was rendered as Boolean attribute. This has been removed as bundlers often remove object properties with an undefined value as given a = {} then a.a === undefined