VueJS 和动态标题

Question

尝试使用vue-meta

我无法理解如何根据 XHR 响应设置标题。到目前为止，我有：

<script>
    export default {
        name: 'Model',
        data() {
            return {
                model: [],
            }
        },
        metaInfo: {
            title: 'Default Title',
            titleTemplate: '%s - site slogan'
        },
        methods: {
            getModels() {
                window.axios.get(`/api/${this.$route.params.manufacturer}/${this.$route.params.model}`).then((response) => {
                    this.model = response.data;
                    this.metaInfo.title = response.data.model_name; // THIS NOT WORKING
                });
            }
        },
        watch: {
            $route(to, from) {
                if ( to.name === 'model' ) {
                    this.getModels();
                }
            },
        },
        created() {
            this.getModels();
        }
    }
</script>

当我尝试设置

this.metaInfo.title = response.data.model_name;

获取错误：未捕获（承诺）TypeError：无法设置未定义的属性“title”

所以 this.metaInfo 是未定义的...

我需要我的标题基于 XHR 请求的响应。

Answer 1

您需要使用的函数形式metaInfo并让它从反应数据中获取更新

<script>
export default {
    data() {
        return {
            title: "Default Title",
            // ...
        };
    },
    metaInfo() {
        return {
            title: this.title,
            // ...
        };
    },
    methods: {
        getModels() {
            window.axios.get("url...").then((response) => {
                this.title = response.data.model_name;
            });
        }
    },
    //  ...