I have an array of objects displayed in a table, and I'm trying to retrieve the value of the object that was clicked. However, when I click on one of the numbers, it only returns the value of the last object in the array.
Currently, I am looping through all the objects in the array, but I can't figure out how to only select the one that I click on.
<template>
<div>
<tbody>
<tr v-for="(call, index) in filterSummary" :key="index">
<td>
<a
@click="onSelect"
class="waves-effect waves-dark green btn-small left"
id="select_DID_button"
>{{ call.number }}</a>
</td>
<td>{{ call.name }}</td>
<td>{{ call.dataValues.volume }}</td>
<td>{{ call.dataValues.inboundVolume }}</td>
<td>{{ call.dataValues.outboundVolume }}</td>
<td>{{ call.dataValues.totalDuration | formatDuration }}</td>
<td>{{ call.dataValues.inboundDuration | formatDuration }}</td>
<td>{{ call.dataValues.outboundDuration | formatDuration }}</td>
<td>{{ call.dataValues.averageDuration | formatDuration }}</td>
</tr>
</tbody>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
onSelect() {
var obj = this.$store.state.callerActivitySummary;
for (var i = 0; i < obj.length; i++) {
var newNumber = obj[i].number;
this.$store.commit("updateNumber", newNumber);
console.log("Number: ", newNumber);
}
this.getCallerActivityDetails();
}
}
}
</script>
This is what my array of objects looks like:
{
"items": [
{
"alternativeNames": [],
"number": "012345678",
"dataValues": {},
"name": "Random name"
}
]
}
Here is the output in the console:
Number: 111968948
Number: 49819811
Number: 0566561651
Number: 012345678
I am trying to extract the number from the object that was clicked on.