I have a Vue component with some data inside. I also have an element, which is bind to the data inside the script tag of the component. The problem is that, I use another component to push data to this one, so the div should dynamically change when the new data is pushed. However, that does not happen in my case. Although the data (if I console.log it) changes, the div does not dynamically change as well. Here is the code:
Main component:
<template>
<div class="small">
<div v-text="x">{{x}}</div>
</div>
</template>
<script>
export default {
components: {
ExternalComponent
},
data() {
return {
x: 0
}
},
async mounted() {
},
methods: {
receiveData(data) {
this.x = data;
}
}
}
</script>
<style>
</style>
External component:
<template>
<div class="R">
</div>
</template>
<script>
import MainComponent from './MainComponent'
export default {
components: {
MainComponent
},
data() {
return {
}
},
async mounted() {
},
methods: {
clickListener() {
$('.R').on('click', function(event) {
MainComponent.methods.receiveData(12)
});
}
}
}
</script>
<style>
</style>
Basically, I want that to be pushed and read from the div in the MainComponent each time something is click in the External component ( because different type of data will be sent ).
