将脚本标签中的变量传递给 Vue 实例答案

【问题标题】：Pass variable from within script tags to Vue instance将脚本标签中的变量传递给 Vue 实例
【发布时间】：2019-11-27 15:32:32
【问题描述】：

在我的 Drupal 7 网站的 html 中有这个

<script>$L = $L.wait(function() {
(function($) {
      Drupal.behaviors.related_products = {
        attach: function (context, settings) {
          artiklar = Drupal.settings.related_products.artiklar;
          console.log(artiklar);
        }
      };
    })(jQuery);
});</script>

在上面的变量 artiklar 中，我有一些使用 Drupal 行为从服务器端传递的数据。现在，在客户端，我需要访问 Vue 组件中的变量 artiklar，如下所示：

Vue.component('artikel-lista', {
    template:`
        <ul>
          <artikel v-for="artikel in artiklar">{{ artikel.title }} Pris: {{artikel.price}} <a :href="artikel.link" class="button tiny" target="_blank">Läs mer</a></artikel>
        </ul>
    `,

    data(){
      return {
        artiklar: "",
      };
    },

    mounted: function(){
      this.artiklar = artiklar // how can I access the variable "artiklar" here
    },

});

变量中的数据由我的 Vue 组件中需要的项目数组组成。但是如何将脚本标签中的变量传递给 Vue 实例，该实例位于一个单独的文件中，插入到结束正文标签之前。有人吗？

【问题讨论】：

它关于上下文/范围而不是关于文件 - eventbus 可以是关键字
能否将artiklar 值分配给页面的隐藏输入类型，并通过document.getElementById('hiddenFieldId').value 在vue 中访问它？
Angelo：我尝试了您的建议，将值分配给隐藏输入可以正常工作，但是无法使用 querySelector() 或 getElementById() 获取该值，这与范围可能正如 EstraDiaz 所暗示的那样。

标签： javascript vue.js

【解决方案1】：

如果您在全局可见的Drupal.settings.related_products.artiklar 对象中有数据，那么您可以在 Vue.js 中以几乎相同的方式引用它。或者如果您必须使用此功能，请将数据分配给全局范围 window.*。

new Vue({
  template: `<div>{{foo}} / {{bar}}</div>`,
  data() {
    return {
      foo: Drupal.settings.related_products.artiklar,
      bar: window.artiklarData
    };
  }
}).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">Vue App</div>

<script>
  // simulate global variable
  var Drupal = {
    settings: {
      related_products: {
        artiklar: ['fus', 'ro', 'dah']
      }
    }
  };
  (function() {
    window.artiklarData = Drupal.settings.related_products.artiklar;
  })();
</script>

如果在创建Vue对象后给Drupal.settings.related_products.artiklar赋值，可以尝试使用documentation中描述的解决方案，例如

const vm = new Vue({
  template: `<div>{{foobar}}</div>`,
  data() {
    return {
      foobar: 'Initial value'
    };
  }
}).$mount("#app");

setTimeout(() => {
  // simulate global variable
  var Drupal = {
    settings: {
      related_products: {
        artiklar: 'Changed value'
      }
    }
  };

  (function() {
    vm.foobar = Drupal.settings.related_products.artiklar;
  })();
}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">Vue App</div>

也许你可以使用 RxJS，但我没有足够的知识来判断它是否属实并举个例子。

【讨论】：

非常感谢..我尝试了 window.artiklarData 和 document.artiklarData 并且我可以在控制台中访问它，所以它存在，但是在我的 Vue 实例所在的 js 文件中，这个全局是“未定义”....可能与范围有关？

【解决方案2】：

以防万一其他人遇到同样的事情，我将这个答案发布到我自己的问题中（我不小心用错误的帐户发布了问题）。最后证明 Gander 的回答是正确的，我可以直接在 Vue 组件中访问该变量，而无需先将其存储为一个全局变量。不过，查看的结果有点奇怪，经过一些试验后，我发现我必须使用 JSON.parse() 解析结果。这是现在的工作代码：

Vue.component('artikel-lista', {
    template:`
        <ul>
          <artikel v-for="artikel in artiklar">{{ artikel.title }} Pris: {{artikel.price}} <a :href="artikel.link" class="button tiny" target="_blank">Läs mer</a></artikel>
        </ul>
    `,
    data(){
      return{
      artiklar:""
    }
    },
    mounted:function(){
        this.artiklar = JSON.parse(Drupal.settings.related_products.artiklar);
        console.log(this.artiklar);
  }


});

【讨论】：