How to pass value to a vue instance?

Question

I want to pass a value from my web component to the vue instance, I want to use it rails html.erb file, Here is the element I am mounting the vue instance on:

    <div id="app" :purchaseId="1">

pass it to a vue instance but it does not seem to work, the vue instance is declared in main.js like this:

export default new Vue({
  store,
  vuetify,
  render: h => h(App),
  data: {
    purchaseId: null
  },
  methods: {
    setJson(payload) {
      console.log("payload", payload);
      this.purchaseId = payload;
    }
  }
}).$mount("#app");

After this I want to pass to it's child component, can anyone tell me how can I do that

Answer 1

I see that you should bind that attribute to the method instead of data property and pass the data coming from rails as parameter : 1st solution:

  <div id="app" :purchaseId="setJson(1)">

or

  <div id="app" :purchaseId="setJson(<%= purchaseId %>)">

---

export default new Vue({
  store,
  vuetify,
  render: h => h(App),
  data: {
    purchaseId: null
  },
  methods: {
    setJson(payload) {
      console.log("payload", payload);
      this.purchaseId = payload;
    }
  }
}).$mount("#app");

2nd solution :

Try to use pure js to get that value by using $refs and getAttribute method:

<div id="app" ref="app" purchaseId="<%= purchaseId %>">

export default new Vue({
  store,
  vuetify,
  render: h => h(App),
  data: {
    purchaseId: null
  },
  methods: {
    setJson(payload) {
      console.log("payload", payload);
      this.purchaseId = payload;
    }
  },
 mounted(){
    let payload=this.$refs.app.getAttribute('purchaseId');
    this.purchaseId = payload;

  }
}).$mount("#app");