javascript - 以 count 作为值迭代对象

Question

在 Vue 应用程序中，我有一个如下的数据结构:

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

还有一个带有简单按钮的模板，用于迭代对象。

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

问题

单击“下一步”按钮，我想通过逐行迭代 obj 的值来增加 currentKey 和 currentVal 的值线。

预期结果

每次单击“下一步”按钮，值都会增加(直到到达最后一对)，如下所示:

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

如何才能实现这一目标？

感谢您的帮助!

Answer 1

我建议更改您的对象结构，使其更加直观。

我不熟悉 vue 如何跟踪传入的数据对象，但这里有一个粗略的想法:

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