如何使用 vue-head 插件设置从数据库读取的元数据？答案

【问题标题】：How with vue-head plugin to set meta read from db?如何使用 vue-head 插件设置从数据库读取的元数据？
【发布时间】：2020-08-25 22:11:01
【问题描述】：

制作 vue/cli 4 应用程序我想在数据库中的数据上添加页眉我用https://github.com/ktquez/vue-head 但问题是 title 和 meta 是用我拥有的 vars 的初始数据设置的在数据块中，但不是来自我从 db 读取的 var 的值。我愿意：

...
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueHead from 'vue-head'
Vue.use(VueHead)
Vue.use(VueRouter)


export default {
    ...
    data() {
        return {
            ...
            site_name : 'QQWWEERRTTYY',
            ...

        }
    }, // data () {


    head: {

        title: function () {
            console.log('-1 this.site_name::')
            console.log(this.site_name) // In console I see “QQWWEERRTTYY” value, but not value what I read from db
            return {
                inner: 'AAA : '+this.site_name
            }
        },

        meta: function () {
            console.log('-2 this.site_name::')
            console.log(this.site_name) // In console I see “QQWWEERRTTYY” value, but not value what I read from db
            return [
                { name: 'description', content: 'BBB Events of '+ this.site_name }
            ]
        },
    },

    ...

    mounted() {

        retrieveAppDictionaries('eventsTimelinePage', ['site_name'])
        bus.$on('appDictionariesRetrieved', (data) => {
            if (data.request_key === 'eventsTimelinePage') {
                this.site_name = data.site_name // I READ DATA FROM DB
            }
        })
    }, // mounted() {

我知道 WATCH 可以在类似的情况下使用，当我需要在分配值时捕获事件时到 site_name var，但我不知道我可以使用 Watch 是这种情况吗？

"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vue-head": "^2.2.0",

谢谢！

【问题讨论】：

标签： vuejs2

【解决方案1】：

基于this GitHub issue thread，您现在可以self.$emit('updateHead') 强制 vue-head 根据反应数据重新计算。

【讨论】：