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

Question

在我的 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 实例，该实例位于一个单独的文件中，插入到结束正文标签之前。任何人？

Answer 1

如果您在全局可见Drupal.settings.related_products.artiklar对象中有数据，那么您可以在 Vue.js 中以几乎相同的方式引用它。或者如果您必须使用此功能，请将数据分配给全局范围window.*。new Vue({&nbsp; template: `<div>{{foo}} / {{bar}}</div>`,&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; foo: Drupal.settings.related_products.artiklar,&nbsp; &nbsp; &nbsp; bar: window.artiklarData&nbsp; &nbsp; };&nbsp; }}).$mount("#app");<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">Vue App</div><script>&nbsp; // simulate global variable&nbsp; var Drupal = {&nbsp; &nbsp; settings: {&nbsp; &nbsp; &nbsp; related_products: {&nbsp; &nbsp; &nbsp; &nbsp; artiklar: ['fus', 'ro', 'dah']&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; };&nbsp; (function() {&nbsp; &nbsp; window.artiklarData = Drupal.settings.related_products.artiklar;&nbsp; })();</script>如果您Drupal.settings.related_products.artiklar在创建Vue对象后分配值，您可以尝试使用文档中描述的解决方案，例如const vm = new Vue({&nbsp; template: `<div>{{foobar}}</div>`,&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; foobar: 'Initial value'&nbsp; &nbsp; };&nbsp; }}).$mount("#app");setTimeout(() => {&nbsp; // simulate global variable&nbsp; var Drupal = {&nbsp; &nbsp; settings: {&nbsp; &nbsp; &nbsp; related_products: {&nbsp; &nbsp; &nbsp; &nbsp; artiklar: 'Changed value'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; };&nbsp; (function() {&nbsp; &nbsp; vm.foobar = Drupal.settings.related_products.artiklar;&nbsp; })();}, 2000);<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">Vue App</div>也许您可以使用 RxJS，但我没有足够的知识来判断它是否正确并举个例子。

Answer 2

以防万一其他人在同样的事情上苦苦挣扎，我将这个答案发布到我自己的问题中（我不小心用错误的帐户发布了问题）。最后证明 Gander 的回答是正确的，我可以直接在 Vue 组件中访问该变量，而无需先将其存储为一个全局变量。不过，查看的结果有点奇怪，经过一些试验后，我发现我必须使用 JSON.parse() 解析结果。这是现在的工作代码：Vue.component('artikel-lista', {&nbsp; &nbsp; template:`&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; `,&nbsp; &nbsp; data(){&nbsp; &nbsp; &nbsp; return{&nbsp; &nbsp; &nbsp; artiklar:""&nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; mounted:function(){&nbsp; &nbsp; &nbsp; &nbsp; this.artiklar = JSON.parse(Drupal.settings.related_products.artiklar);&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.artiklar);&nbsp; }});