Question

Vue JS：组件中无法识别全局变量

2018-01-28

1911

javascript vue.js vuejs2

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

我遇到了 Vue.js 的问题，事实上，我遇到了这两个错误：

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

我的代码之前运行完美，所以我不明白我的错误在哪里：/

这是我的 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 文件中的某处，我调用

您有什么想法吗？：/

谢谢

Answer 1

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

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