VueJS:未在组件中重新协调的全局变量

时间:2018-01-28 03:04:06

标签: javascript vue.js vuejs2

我目前正在将我的前端升级到基于gulp的应用程序。

我遇到了Vue.js的问题,事实上,我有这两个错误:

  

[Vue警告]:财产或方法" params"未在实例上定义   但在渲染期间引用。确保此属性是   无论是在数据选项中,还是在基于类的组件中,都是反应性的   初始化财产。看到:   https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

     

[Vue警告]:渲染错误:" TypeError:无法读取属性   ' websiteUrl'未定义"

我的代码之前工作得很好,所以我不明白我的错误在哪里:/

这是我的HTML代码:

<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>`
    });

在我的HTML文件中,我打电话给

你知道吗? :/

由于

1 个答案:

答案 0 :(得分:1)

您必须将params变量添加到Vue组件的数据中。

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