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

Question

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.

Please show a complete code example, include any relevant UI elements. — Code-Apprentice
– Code-Apprentice, Commented Nov 5, 2019 at 23:53
Is obj reffering to items? or the object containing items? — camiblanch
– camiblanch, Commented Nov 5, 2019 at 23:53

wdm · Accepted Answer · 2019-11-06 00:33:41Z

1

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) { ...

edited Nov 6, 2019 at 0:33

answered Nov 6, 2019 at 0:05

wdm

7,1891 gold badge31 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kyle Over a year ago

Correct, it's only grabbing the last value in the array. Changing it to let has the same results.

wdm Over a year ago

Seems like you're looping through all the objects and writing to the store each time. Where is the comparison to number selected and the number in the objects you're looping through?

wdm Over a year ago

You'll need something like if (selected.number === obj[i].number) { this.$store.commit("updateNumber", obj[i].number); break; }

Kyle Over a year ago

So that's grabbing the first item now, how do I set selected to the item i click on? Sorry I feel like i'm super tunnel visioned right now on this.

wdm Over a year ago

Awesome. Happy to help!

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related