CODEWITHSUNDEEP
javascriptarraysobjectvue.jsselecteditem
Kyle
Kyle

Reputation: 65

How can I get the selected value of an object in an array on click?

I have a an array of objects listed in a table, and I'm needing to get the value of the clicked object. When I click on of the numbers, it loops through and only gets the last arrays value.

I'm currently looping through all of the objects in the array, but I can't get it to just pick the one object i select.

<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>

My array of objects looks like this.

{
  "items": [
    {
    "alternativeNames": [],
    "number": "012345678",
    "dataValues": {},
    "name": "Random name"
    }
  ]
}

Console output is:

Number:  111968948
Number:  49819811
Number:  0566561651
Number:  012345678

I'm needing to get the number from the clicked object.

Upvotes: 0

Views: 963

Answers (1)

wdm
wdm

Reputation: 7189

I don't see a comparison of the selected number and the number in each objects you're looping over. You need something like this:

if (selectedNumber === obj[i].number) {
    this.$store.commit("updateNumber", selectedNumber);
    break;
}

Where selectedNumber is the number being passed to the method.

@click="onSelect(call.number)"

...

methods: {
    onSelect(selectedNumber) { ...

Upvotes: 1

Related Questions