Question

我正在构建一个Drupal 8自定义模块，该模块由几个Vue组件组成，这些组件进行API调用并在页面上显示列表或详细视图。我可以检索所需的数据，但是我想更新页面标题以使用我正在进行的API调用中的值（在这种情况下为meta.data.title）。因为这是Drupal 8自定义模块中的一个组件，所以路由是在.routing.yml文件中进行的（就像Drupal的规范一样），而不使用像vue-router这样的东西。

我使用以下教程添加了Vue mixin尝试提取标题：https://tahazsh.com/vuebyte-change-page-title如果我对标题进行硬编码，则该标题会正确更新。但是，当我改用meta.data.title作为标题时，它返回为undefined。我还尝试添加一个计算变量ActualTitle，并在那里添加标题。当我加载页面时，Vue的开发工具向我显示了正确检索了ActualTitle，但是页面仍然加载了“未定义”标题。

如何从数据中提取标题作为页面标题？我在下面提供了一些代码示例。它们也可以在GitHub上使用：https://gist.github.com/KurtTrowbridge/f4a00b30193cc168a7dcbcc3c2ea490c

Detail.vue，我的Vue组件：

<template>
  <div class="story-detail" v-bind:title="meta.data.title">

    <article>

      <div class="content-wrapper no-margin">
        <div class="page-content">
          <section class="section">
            <div class="page-type ts-h2 heading--underlined">News</div>
            <h1 class="page-title page-title--no-margin">{{ meta.data.title }}</h1>
            <!-- ... some other HTML is here but it's not important to this -->
          </section>
        </div>
      </div>

    </article>

  </div>
</template>

<script>
    import axios from 'axios'
    axios.defaults.baseURL = 'REDACTED';
    axios.defaults.headers.common['Authorization'] = 'Bearer REDACTED';
    axios.defaults.headers.post['Content-Type'] = 'application/json';
    export default {
        name: 'Detail',
        title () {
          return `${this.title}` // I tried this with actualTitle too and it didn't work
        },
        props: {
            id: {
              type: Number,
              required: true,
              // default: '1008218'
              default: window.location.href.split('/').pop()
            },
            url: {
              type: String,
              default: window.location.href
            }
        },
        computed: {
          actualTitle: function () {
            return this.meta.data.title // this shows up correctly in Vue dev tools
          }          
        },
        data() {
          return {
            info: null,
            content: null,
            meta: null,
            read_more: false,
            title: this.actualTitle // this doesn't seem to work, though if I hardcode a string, that shows up; this displays "undefined"
          };
        },
        mounted() {
            axios
            .get('/content/doc/' + this.id)
            .then(response => {
              this.content = response
            })
            axios
            .get('/search/doc/' + this.id)
            .then(response => {
              this.meta = response
            })     
        }
    }
</script>

title-mixin.js，通过https://tahazsh.com/vuebyte-change-page-title：

function getTitle (vm) {
    const { title } = vm.$options
    if (title) {
        return typeof title === 'function'
        ? title.call(vm)
        : title
    }
}

export default {
    created () {
        const title = getTitle(this)
        if (title) {
        document.title = title
        }
    }
}

app.js：

    require("babel-polyfill");
}

import Vue from 'vue'
import detail from './components/Detail'
import titleMixin from './mixins/title-mixin'

window.onload = () => { // needed due to Drupal JS loading

    Vue.component('detail', detail)
    Vue.mixin(titleMixin)

    const app = new Vue({el: '#main-blocks'})
};

是否可以将Vue组件中来自API请求的数据用作页面标题？

0 个答案: