[Vuejs]-Pass variable from within script tags to Vue instance

by

1👍

✅

If you have data in the globally visible Drupal.settings.related_products.artiklar object then you can refer to it practically the same way in Vue.js. or if you must use this function, assign data to global scope 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>

If you assign the value to Drupal.settings.related_products.artiklar after creating the Vue object, you can try to use the solutions described in the documentation, e.g.

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>

Maybe you could use RxJS but I don’t have enough knowledge to tell if it’s true and give an example.

👤Gander

0👍

Just in case anyone else is struggling with the same thing, I post this answer to my own question (I accidentally posted the question with the wrong account). In the end it turns out that the answer from Gander was correct and that I could access the variable directly in the Vue component, w/o first stashing it an a global variable. The viewed result was kind of weird though and after some trialling I found out that I had to parse the result with JSON.parse(). This is the working code now:

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


});
👤TBJ

Leave a comment