There is one component "TableFields.vue", and two view files "Home.vue" and "Statistics.vue".
In component, I have changes: [] variable under data() object.
data () {
return {
startStopA: true,
startStopB: true,
initialValueA: 3,
initialValueB: 3,
randomNumbersArray: [],
randomSignA: '+',
randomSignB: '+',
signsArray: ['+', '-'],
intervalA: null,
intervalB: null,
changes: []
}
},
That changes array dynamically gets object from calculationsA() function.
calculationsA () {
this.randomSignA = this.signsArray[
Math.floor(Math.random() * this.signsArray.length)
]
this.randomSignA === '+'
? (this.initialValueA += this.randomNumbersArray[0])
: (this.initialValueA -= this.randomNumbersArray[0])
const d = new Date()
// console.log(d.toLocaleTimeString())
// console.log(this.randomNumbersArray[0])
// this.changes.push(this.randomNumbersArray[0])
// this.changes.push(d.toLocaleTimeString())
// console.log(this.changes)
const newChange = {}
newChange.field = 'A'
newChange.value = this.randomNumbersArray[0]
newChange.time = d.toLocaleTimeString()
this.changes.push(newChange)
},
How do I pass changes: [] from TableField.vue component to Statistics.vuepage, in order to code dynamic table with changes array objects data. I am not sure, do I need to create new component or this can be done without it. Basically, this is the working code from the TableField.vue component that is implemented for testing purposes and can be seen from Home.vue which is root url.
<div class="statistics">
<table>
<tr>
<th>Field</th>
<th>Value</th>
<th>Time</th>
</tr>
<tr v-for="item in changes" :key="item.value">
<td>{{ item.field }}</td>
<td>{{ item.value }}</td>
<td>{{ item.time }}</td>
</tr>
</table>
</div>
</div>
I need that code to work at Statistics.vue page.
Here is the link to gitlab repo for better convenience.
User "async" from discord vue chat has solved this for me.
Solution was a bit complicated and required a changes to few files.
Refer to gitlab repo if you are curious to find out more about it, because I can't document it here due to its complexity.