값을 vue 인스턴스에 전달하는 방법?

값을 vue 인스턴스에 전달하는 방법?

웹 구성 요소에서 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");

이 후 아동용 부품으로 전달하고 싶은데, 누가 어떻게 하면 좋을지 말해 줄 수 있어?

데이터 속성 대신 메소드에 속성을 바인딩하고 레일에서 나오는 데이터를 매개 변수: 첫 번째 솔루션:

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

두 번째 해결책:

$ref를 사용하여 해당 값을 얻으려면 순수 js를 사용하십시오.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");

참조URL: https://stackoverflow.com/questions/63424852/how-to-pass-value-to-a-vue-instance