Question

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

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

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

[Vue警告]：渲染错误：＆＃34; TypeError：无法读取属性   ＆＃39; websiteUrl＆＃39;未定义＆＃34;

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

这是我的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>`
});

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

1 个答案: