将脚本标签中的变量传递给 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({

  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>

如果您Drupal.settings.related_products.artiklar在创建Vue对象后分配值，您可以尝试使用文档中描述的解决方案，例如

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，但我没有足够的知识来判断它是否正确并举个例子。

Answer 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);

  }

});