I have been working with vue cli and encountered an issue with a 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>
},
When I checked the Chart component by console.log, it ran 9 times!
props: ['text'],
text1(){
console.log('text', this.text)
},
https://i.sstatic.net/t00T3.jpg
I realized that since my User component is displayed thrice intentionally (due to an array of 3 users I have), with a box for each measurement (temp, vol, and weight), it's running 9 times. However, I'm uncertain why it runs each time.
I would appreciate if it executed only once for the specific box I clicked on. Any assistance would be greatly appreciated, thanks!
Update (Additional Code)
User.vue
<template >
<div class="user">
<div v-for="(item, index) in users" :key="item.id">
<div>
<div @click.stop="myFunction(index); newData(index, item.Vol); newText('Volume')">
<v-touch v-on:doubletap="isOpen = !isOpen;" >
<transition name="modal">
<div v-if="isOpen">
<div class="overlay" @click.self="isOpen = false;">
<div class="modal">
<Chart :text=text :dat=dat ></Chart>
</div>
</div>
</div>
</v-touch>
volume </div>
<div @click.stop="myFunction(index);newData(index, item.Temp); newText('Temperature')">
<v-touch v-on:doubletap="isOpen = !isOpen;" >
<transition n...
and finally I pass text to a chart:
<template>
<div id="container" ref="chart"></div>
</template>
<script>
title: {
text: this.text,
}
series: [ {
name: this.text,
data: this.dat,
}],