express-vue icon indicating copy to clipboard operation
express-vue copied to clipboard

mounted is not working for rendered file

Open rafaelragib opened this issue 3 years ago • 0 comments

Description of Issue

Hello. I am trying to use `express-vue` to render a .vue file in one of my route in node. I need to use the mounted lifecycle hook for some data. But I am facing some difficulties as my mount is not working when the file is rendered in the browser.

Example vue file:

<template>
  <div>
    {{ isMounted }}
  </div>
</div>
</template>
<script>
mounted: function() {
    console.log('hello senpai');
    this.isMounted = true;
  },
</script>

Exposed Node route:

routes.get('/example', async (req, res) => {
  try {
    const data = {
      variableOne: await getvariableOne(httpVal),
    };
    res.renderVue('example.vue',data);
  } catch(e) {
    logger.error(`Failed to generate`, e);
    res.sendStatus(503);
  }
})

server.js:

const vueOptions = {
  rootPath: path.join(__dirname, '../../components/view'),
  vueVersion: '2.6.14', 

};
const expressVueMiddleware = expressVue.init(vueOptions);

app.use(expressVueMiddleware);

The isMounted variable here is always false when rendered and also not getting the console. I cannot use created lifecycle as data is manipulated after the template is rendered. Any sort of help will be appreciated. Thanks.

rafaelragib avatar Jan 03 '23 13:01 rafaelragib