Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Values not reactive?!

See original GitHub issue

I want to update the title and meta-tags after the page-content is loaded via REST-API, so the final values don’t exist when the component is created.

Unfortunately, the meta-tags and title won’t react to changes in the data-variables:

<template lang="pug">
  .sections
</template>

<script>
import { fetchData }                  from '../../../js/mixins'

export default {
  name: 'HomeTemplate',
  data () {
    return {
      [...],
      getcontent: {
        contents: {
          myTitle: ''
        }
      }
      meta: {
        myTitle: ''
      }
    }
  },
  [...],
  head: {
    title: function () {
      return {
        inner: this.meta.myTitle
      }
    },
    meta: function () {
      return [
        { name: 'description', content: this.meta.myTitle, id: 'desc' }
      ]
    }
  },
  methods: {
    [...],
    setMetaData () {
      if (typeof this.getcontent !== 'undefined') {
        if (this.getcontent.contents.headline !== '') {
          this.meta.myTitle = this.getcontent.contents.headline
        }
      }
    },
    fetchMyData () {
      const _this = this
      let contentPath = ''
      let teaserPath  = ''

      // Set API-Paths
      if (process.env.NODE_ENV === 'development') {
        contentPath   = '../../static/testData/contents/home.json'
        teaserPath    = '../../static/testData/contents/home_teaser.json'
      } else {
        contentPath   = '/?_format=json'
        teaserPath    = '/rest_extended/front_content?_format=json'
      }

      // Fetch Data
      fetchData(_this, contentPath, 'getcontent', function () {
        fetchData(_this, teaserPath, 'teasers', function () {
          _this.setMetaData()
        })
      })
    }
  }
}
</script>

this.meta.myTitle changes correctly in the vue-console, but nothing happens in the <title> or <meta name="description">