VueJS：組件中未重新調整的全局變量

Question

我目前正在將我的前端升級到基於 gulp 的應用程序。

我有一個 Vue.js 的問題，事實上，我有這兩個錯誤：

[Vue 警告]：屬性或方法“params”未在實例上定義，但在渲染期間被引用。 通過初始化該屬性，確保該屬性是反應性的，無論是在數據選項中，還是對於基於類的組件。 請參閱： https ://v2.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 文件的某個地方，我調用

你有什么主意嗎 ？ ：/

謝謝

Answer 1

您必須將 params 變量添加到 Vue 組件的數據中。

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