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

Question

我想从我的 web 组件传递一个值到 vue 实例，我想使用它 rails 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");

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

Answer 1

我看到您应该将该属性绑定(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");