Vue send updated props to child after rendering

Question

How to update PROPS after rendering in VUE?

PARENT

const myProps = [];
window.onmessage = function(data) {
  myProps.push(data)
}

new Vue({
  el: el || '',
  render: h => h(myComponent, {props:{myProps: myProps}}),
});

CHILD

<template>...</template>

export default {
  props: ['myProps'],
  ....
}

Due to window message comes later after myComponent rendered.. in this case no any updates, just got empty Array.. What the best way to listen updates props in this case?

ozzot · Accepted Answer · 2020-11-25 13:26:49Z

3

define myProps as data property in vue instance then run window.onmessage in mounted hook :

new Vue({
  el: el || '',
  data(){
    return{
      myProps : []
   } 
 },
  mounted(){
   window.onmessage = (data)=> {
       this.myProps.push(data)
   }
 },
  render: function(h){return h(myComponent, {props:{myProps: this.myProps}}}),
});

edited Nov 25, 2020 at 13:26

ozzot

274 bronze badges

answered Nov 22, 2020 at 19:21

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ozzot Over a year ago

got Error : [Vue warn]: Error in render: "TypeError: Cannot read property 'updatedPopup' of undefined" that means { props: { myProps: this.myProps } where looks like { props: { myProps: underfined.myProps } in console

Boussadjra Brahim Over a year ago

Try it out without this

ozzot Over a year ago

has to be changed ES6 render: h => h(..). to function render: function(h) {h(...)} for this to be worked

hvaughan3 · Accepted Answer · 2020-11-22 19:23:45Z

1

In addition to Boussadjra's answer, I would also recommend using a state library such as Vuex which allows you to share state across pages.

But for a simple data share, Boussadjra's answer will work as well.

answered Nov 22, 2020 at 19:23

hvaughan3

11.1k5 gold badges61 silver badges79 bronze badges

1 Comment

Boussadjra Brahim Over a year ago

for simple cases he could use observable api

Pierre Said · Accepted Answer · 2020-11-22 19:26:02Z

In addition to other answer if you want to interact with a Vue app from vanilla use a method.

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    inc() {
      this.counter += 1;
    }
  }
})

window.inc = () => {
  app.inc();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h3>Vue app : </h3>
  Counter : 
  {{ counter }}
</div>




<h3>Outside of vue : </h3>

<button onclick="inc()">
  Inc
</button>

Collectives™ on Stack Overflow

Vue send updated props to child after rendering

3 Answers 3

3 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Related