CODEWITHSUNDEEP
javascriptvue.jsvuejs2
graille
graille

Reputation: 1231

VueJS : global variables not reconized in components

I'm currently upgrading my front-end to a gulp-based application.

I have an issue with Vue.js, in fact, I have these two errors :

[Vue warn]: Property or method "params" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

[Vue warn]: Error in render: "TypeError: Cannot read property 'websiteUrl' of undefined"

My code worked perfectly before, So I don't understand where my mistake is :/

This is my html code :

<script type="application/javascript">
  /** Params **/
  let params = {};
  let userData = {};

  params.websiteUrl = 'http://mywebsite.com/';
  params.websiteMediasUrl = 'http://medias.mywebsite.com/';
  params.websiteStatsUrl = 'http://stats.mywebsite.com/';

  userData.isLogged = 01;
  userData.isAdmin = 01;
  userData.canVote = 01;
</script>

<!-- FOSRoutingBundle -->
<script src="/bundles/fosjsrouting/js/router.js" type="application/javascript"></script>
<script src="/js/routing?callback=fos.Router.setData"></script>

<!-- Application -->
<script src="/build/js/vendor/bundle.js" type="application/javascript"></script> <!-- VueJs is here -->
<script src="/build/js/app/app.js" type="application/javascript"></script>
<!-- Search bar -->
<script type="application/javascript">
    Vue.component('media-info', {
        delimiters: ["<%", "%>"],
        props: {
            elt: {}
        },
        template: `<div class="media-box"><% params.websiteUrl %></div>`
    });

And somewhere in my HTML file, I call

Do you have any idea ? :/

Thanks

Upvotes: 0

Views: 1931

Answers (1)

Ben
Ben

Reputation: 3060

You must add the params variable to the Vue component's data.

    Vue.component('media-info', {
    delimiters: ["<%", "%>"],
    data() {
        return {
           params,
        };
    },
    props: {
        elt: {}
    },
    template: `<div class="media-box"><% params.websiteUrl %></div>`
});

Upvotes: 1

Related Questions