javascript - 将变量从脚本标签内传递到 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.lated_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.lated_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，但我没有足够的知识来判断它是否属实并给出一个例子。