I am currently in the process of transitioning my front-end to a gulp-based application.
I seem to be encountering some issues with Vue.js as I am facing 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 was functioning perfectly before, so I am confused as to where I might have gone wrong :/
Here is a snippet of 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>`
});
Within my HTML file, I make a specific call
Any insights on what might be causing this issue? :/
Thank you