vuera icon indicating copy to clipboard operation
vuera copied to clipboard

Props reactivity

Open yaki4 opened this issue 4 years ago • 1 comments

When i change a variable that i used as a props in my react components, the props is not updated.

vue file

<template lang="pug">
  div.home
    demo-one.two(@ajout='checkUpd', :message='name')
</template>
<script>
import DemoOne from '@/components/react/DemoOne';

export default {
  name: 'Home',
  components: {
    'demo-one': DemoOne,
  },
  data() {
    return {
      name: 'Maurice',
    };
  },
  methods: {
    checkUpd() {
      this.name = 'PAUL';
    },
  },
};
</script>

and my react component

import React from 'react';

class DemoOne extends React.Component {
constructor(props) {
    super(props);
    this.addNode = this.addNode.bind(this);
  }

  addNode() {
    this.props.ajout();
  }

render() {
    return (
    <div>
      <div> Hello {this.props.message}, I am a React component </div>
      <button onClick={this.addNode}>Créer noeud</button>
    </div>
    );
  }
}

export default DemoOne;

So for this exemple the value for message is Paul in vue after my click but stay as Maurice in my react component.

yaki4 avatar Feb 19 '20 23:02 yaki4

This will be addressed, but I first need to assess where things are and what needs to be done. Sorry it's been so long since you posted this!

cwadrupldijjit avatar Feb 04 '22 07:02 cwadrupldijjit