I have function that updates text @click but it keeps running multiple times:
User.vue
<div @click="newText('Volume')">
<Chart :text=text ></Chart>
Volume
</div>
<div @click="newText('Temperature')">
<Chart :text=text ></Chart>
Temp
</div>
<div @click="newText('Weight')">
<Chart :text=text ></Chart>
weight
</div>
<script>
newText: function(argT) {
const text = argT;
this.text = text;
console.log('text', this.text);
</script>
},
In Chart component when I console.log it ran 9 times!
props: ['text'],
text1(){
console.log('text', this.text)
},
It seems that since my User component is displayed 3 times(intentionally due to an array of 3 users I have) and there is a box for each measurement(temp, vol and weight), that’s why it’s 9 times. But I’m not sure why it runs each time.
I’ve tried adding @click.stop
but it didn’t seem to help.
I have an example here but in the real project the modal opens only once for whatever was clicked.
I would like it to run only once for the box I clicked.
Any help would be great, thanks!