以计数为值遍历对象

Question

In a Vue application, I have a data structure like this:

data: () => ({
    currentKey: 1,
    currentVal: 1,
    obj: {
      1: 3,
      2: 4,
      3: 2
    }
}),
methods: {
    stepForward() {
        // this method should update currentKey and currentVal 
    }
}

And a template with a simple button to iterate through the object.

<p>Key:{{ currentKey }} Value: {{ currentVal }}</p>
<v-btn @click="stepForward">Next</v-btn>

Problem

Clicking on the Next button, I would like to increase the values of currentKey and currentVal by iterating through the values of obj line by line.

Expected Result

With each click on the Next button the values would increase (until the last pair is reached) as follows:

currentKey: 1
currentVal: 1

currentKey: 1
currentVal: 2

currentKey: 1
currentVal: 3

currentKey: 2
currentVal: 1

currentKey: 2
currentVal: 2

currentKey: 2
currentVal: 3

currentKey: 2
currentVal: 4

currentKey: 3
currentVal: 1

currentKey: 3
currentVal: 2

How is it possible to achieve this?

Thanks for your help!

Answer 1

I would recommend changing your object structure to be a bit more intuitive.

I'm not familiar with how vue tracks that incoming data object, but here's a rough idea:

if (currentVal === obj[currentKey]) {
  currentVal = 1;
  currentKey += 1;
} else {
  currentVal += 1;
}

Answer 2

 if (this.currentVal === this.obj[this.currentKey]) {   
     this.currentKey += 1;
     this.currentVal = 1;
 } else {
     this.currentVal += 1;
 }

copy this code to your stepForward method