Values not reactive?!

[DotCoyote]

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">

[EmmanuelBeziat]

Hi; is there anything new about this?

I found out that the problem happens to me if I directly go to a the specific url of a page, or if I reload it. But when the page is fully loaded from another link via vue-router, it's correctly changed.

[ktquez]

All tags are built head when the component is mounted.
So the information change every page change (recommend use in conjunction with VueRouter), change every component mounted.

Important for rendering on the server side or even for Google which is now identifying tags head dynamic in SPA, the plugin even done to help the page SEO.

But he had not yet seen the need to make it reactive already after the page loaded.

[ktquez]

But I will add a new feature the ability to check the tags you wish to reactive, hence solving this need, okay?

Thank you for using the plugin and the feedback.

[EmmanuelBeziat]

That would be awesome. Thanks for the explanations, I'm looking forward for the update. This is the last major thing i need before putting my website online.

[DotCoyote]

Same here 😊

[jsmmth]

@ktquez Really looking forward to this feature. Hope it is released soon.

[ktquez]

This week!

[ktquez]

Production guys, follow the issue 17, to notify all of the improvements, okay.
Thank you all

[wonderbeyond]

Why was this closed, so was #17 . And no hint abount that values is going to be reactive.

I want it!

[EmmanuelBeziat]

@wonderbeyond It has been released since more than a month now, it's patched up.

[wonderbeyond]

However, I found that without emitting updateHead event after data ready, The <title>'s content won't be updated.
I'm using Vue 1.0.28, vue-head 2.0.10, vue-router 0.7.13.

    // ...
    head: {
        title() {
            return {
                inner: `${this.product.name_abbr} ${this.product.code}`
            }
        },
    },
    route: {
        data: function(transition) {
            var code = this.$route.params.code;
            var self = this;
            return Promise.all([
                loadProduct(code),
                loadHisValues(code, {
                    ordering: 'tradedate',
                    ordering_direction: 'desc'
                })
            ]).then(function(res) {
                var product = res[0];
                var values = res[1];

                setTimeout(function () {
                    self.$emit('updateHead');
                });
                return {
                    product: product,
                    hisValues: values,
                };
            }).then(null, function(e) {
                console.error('Error:', e);
            });
        },
    },
    // ...

[ktquez]

@wonderbeyond
Because the data is being assigned after you issue the event, you can try to put a delay of 1 or 2 seconds to see if it works.

setTimeout(function () {
  self.$emit('updateHead');
}, 1000);

[wonderbeyond]

@ktquez Oh sorry, but you've misunderstood my meaning.
My above code is just working, even with zero timeout.
I meant that I just don't want emitting updateHead manually, like in my avove code.
I think it's better to update head automatically whenever data changes, like data binding in vue's template.