Nuxt.js: Component data's function called twice

[gensjaak]

Hello all.

Can you help me please ? The data function is called twice when I refresh the page.

Thanks

package.json
...
"nuxt": "^1.0.0-rc11",
...

file index.vue

import Functions from '~/utils/Functions'

  export default {
    name: 'Testing',
    components: {},
    data: () => {
      return {
        test: Functions.test()
      }
    },
    methods: {},
    mounted () {}
  }

file ~/utils/Functions.js
...

test () {
  console.error('in data function')
}

...

Browser

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

[linx4200]

Same here. Under the spa mode.

[saknarak]

me too, in spa mode

for 1st called, no store was setup
for 2nd everything just fine

1. data (no state)
2. created (no state)
3. data (has state)

[husayt]

@saknarak @phareal can you confirm that you stilll get it in latest nuxt? I had something similar in pre 1.0, but haven't experienced it lately.

Closing this issue for now. Let us know if you have anything to add.

[gensjaak]

@husayt it's good now in latest Nuxt. Thanks

[yoyo837]

Same here. v1.4.0,
Page A -> route to Page B, go back, Page A data called twice.

[yoyo837]

In my case, (Page A)I tried to get some data using asyncData, I got this problem, if I undo my modifications, then there is no problem.

[yoyo837]

vue.runtime.esm.js(v2.5.13):

function getData (data, vm) {
  try {
    return data.call(vm, vm) // !!! here, line: 3382
  } catch (e) {
    handleError(e, vm, "data()");
    return {}
  }
}

and
.nuxt/client.js

// When navigating on a different route but the same component is used, Vue.js
// Will not update the instance data, so we have to update $data ourselves
function fixPrepatch(to, ___) {
  var _this5 = this;

  if (this._pathChanged === false && this._queryChanged === false) return;

  Vue.nextTick(function () {
    var matches = [];
    var instances = getMatchedComponentsInstances(to, matches);

    instances.forEach(function (instance, i) {
      if (!instance) return;
      // if (!this._queryChanged && to.matched[matches[i]].path.indexOf(':') === -1 && to.matched[matches[i]].path.indexOf('*') === -1) return // If not a dynamic route, skip
      if (instance.constructor._dataRefresh && _lastPaths[i] === instance.constructor._path && typeof instance.constructor.options.data === 'function') {
        var newData = instance.constructor.options.data.call(instance); // !!! here, Near line 700 
        for (var key in newData) {
          Vue.set(instance.$data, key, newData[key]);
        }
      }
    });
    showNextPage.call(_this5, to);

    // Hot reloading
    setTimeout(function () {
      return hotReloadAPI(_this5);
    }, 100);
  });
}

[brooklynb7]

Same issue in 1.4.0~ the call stack will be: data -> mounted -> data
As the outcome, the value set in the mounted function will be overwritten again by the second data function called.

[Heziode]

Same issue with 1.4.1

[idoshamun]

Same issue with 1.4.2

[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.