vuera
vuera copied to clipboard
Props reactivity
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.
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!