Nuxt.js: In 'head(){}' can't use the data which get the dynamic request

[daolou]

My code as follow:

<script>
  // import axios from 'axios'
  var rapaxios = require('rap-axios-plugin')
  export default {
    data () {
      return {
        title: 'test',
        staticD: { // 静态数据
          wait: false,
          fade: ''
        },
        dynamicD: { // 动态请求数据后覆盖此处的默认数据
          'curpath': '/',
          'gotopimg': '/img/i-top.png',
          'logosrc': '/img/logo.png',
          'nav': [
            { 'curpath': '/', 'txt': '首页' },
            { 'curpath': '/cases', 'txt': '案例' },
            { 'curpath': '/designers', 'txt': '设计师' },
            { 'curpath': '/properties', 'txt': '热装楼盘' },
            { 'curpath': '/constructions', 'txt': '在施工地' },
            { 'curpath': '/embodiments', 'txt': '别墅实施' },
            { 'curpath': '/furnishings', 'txt': '别墅软装' },
            { 'curpath': '/villas', 'txt': '出版刊物' },
            { 'curpath': '/about', 'txt': '关于' }
          ],
          'rootdir': '/',
          'tel': '400-001-5821',
          'telimg': '/img/tel.png'
        }
      }
    },
    head () {
      return {
        title: this.title
        meta: this.statsCode.meta
        // link: [],
        // script: this.statsCode
      }
    },
    created () {
      // console.log(this)
      this.fetchData()
      // this.pathfn() // 渲染dom前调用导航定位(异步在这写不起作用,写在fetchData方法里面)
    },
    methods: {
      fetchData: function () {
        console.log('开始请求数据......')
        let that = this
        // 配置projectId，使用前最好先配置config
        rapaxios.config({
          rootUrl: 'http://rap.taobao.org',
          mock: 'mockjsdata',
          projectId: '30077',
          ismock: false
        })
        rapaxios
          .get('api/default')
          .then(function (res) {
            that.dynamicD = res.data
            console.log(res.data)
            that.pathfn() // 渲染dom前调用导航定位
            console.log('请求数据完成......')
          })
          .catch(function (err) {
            console.log(err)
          })
      }
    }
  }
</script>

and it's error,

TypeError: Cannot read property 'meta' of undefined
at VueComponent.head (default.vue:77)

but I use axios request url(http://rap.taobao.org/mockjsdata/30077/api/default) and console.log(data),its exit the statsCode object

that is to say,in head(){} can't use 'statsCode' from data() which dynamic request,why???

who can help me,please!

_{This question is available on Nuxt.js community (#c2073)}

[clarkdo]

Try to use fetch or asyncData to fetch the statsCode.

[daolou]

@clarkdo it still not work

[clarkdo]

Please provide a reproducible repo.

[daolou]

@clarkdo
https://gitlab.com/hello-guoguo/nuxt-demo.git

[clarkdo]

In your codes, ap-global-proxy is a none-ssr plugin, but created will be executed in ssr, so this.axios is undefined.

You can move fetchData to mounted or also proxy requests in server side.

I suggest you to use https://github.com/nuxt-community/axios-module.

[daolou]

@clarkdo I want head() work,

   head () {
      return {
        meta: this.dynamicD.statsCode.meta
      }
    },

so,It has to get data first, then render dom.
if move fetchData to mounted,in head cannot use data

[clarkdo]

Then you should proxy requests in server side.

The axios plugin you are using not support ssr.

[clarkdo]

Or use process.server to exclude ssr axios calling.

 async created () {
      if (!process.server) {
        await this.fetchData()
      }
  }

[daolou]

that is to say,the reason is the 'rap-global-proxy'???
So, do you know which plugin support ssr ?

[clarkdo]

Let us summarize you issue.

1. You want to use meta which is dynamic data.
2. And you used a ssr:false rap-global-proxy plugin to fetch data.
3. head is for generating page meta in ssr.

So you are using a browser-only plugin to load data in ssr, that's incompatible.

If you want make ssr and meta working, axios supports brower and node by nature, so you just need to use a compatible proxy plugin such as axios-module (recemmond) or nuxt proxy, because rap-global-proxy is based on XMLHttpRequest which is not supported in node.js runtime.

[daolou]

soga,
Thank you sincerely!
I try it

[clarkdo]

客气, 感谢你对Nuxt.js的支持.

[daolou]

@clarkdo
I'm so sorry to trouble you again.
Now I use '@nuxtjs/axios','@nuxtjs/proxy',and through asyncData() to get data,but data() cannot update.I don't know the reason,would you please help me?
repo: https://gitlab.com/hello-guoguo/nuxt-demo.git

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.