javascript - 如何将值传递给vue实例？

我想将值从Web组件传递到vue实例，我想使用它来引用html.erb文件，
这是我正在安装vue实例的元素:

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

将其传递给vue实例，但似乎不起作用，该vue实例在main.js中声明如下:

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

在此之后，我想传递给它的子组件，谁能告诉我该怎么做？

最佳答案

我看到您应该将该属性而不是data属性绑定(bind)到该方法，并将来自rails的数据作为参数传递:
第一种解决方案:

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

要么

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

第二个解决方案:
尝试使用纯js通过使用$ refs和getAttribute方法获取该值:

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

关于javascript - 如何将值传递给vue实例？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/63424852/