Need to navigate to next element in an array in Polymer on button click - polymer

Question

I have an array of objects that contain emp info like name age etc and I have a page with previous and next buttons. I want to be able to navigate to the object in the array after clicking on the next button. Do I need use something like redux to achieve this or is there another way to do this. Is there a way to do this in polymer directly.
<dom-module id="my-quiz">
<template>
<div>Employee List</div>
<button on-click="prev">Previous</button>
<button on-click="next">Next</button>
</template>
<script>
class Quiz extends Polymer.Element {
static get is() { return 'my-quiz'; }
// set this element's employees property
constructor() {
super();
this.employees = [
{ name: 'Bob', id: 'b1' },
{ name: 'Ayesha', id: 'b2' },
{ name: 'Fatma', id: 'b3' },
{ name: 'Tony', id: 'b5' }
];
}
prev() {
console.log("prev");
}
next() {
console.log("next");
}
}
window.customElements.define(Quiz.is, Quiz);
</script>
</dom-module>

Answer 1

Here an example how to do this. There may other ways too. :
<div>Employee ID: [[_calculateId(index)]] Name: [[_calculateName(index)]]</div>
<button on-click="prev">Previous</button>
<button on-click="next">Next</button>on>
</template>
<script>
class MyTest extends Polymer.Element {
static get is() { return 'my-test'; }
static get properties() { return {
index:{
type:Number,
value:0
}
}}
// set this element's employees property
constructor() {
super();
this.employees = [
{ name: 'Bob', id: 'b1' },
{ name: 'Ayesha', id: 'b2' },
{ name: 'Fatma', id: 'b3' },
{ name: 'Tony', id: 'b5' }
];
}
_calculateName(i) { return this.employees[i].name }
_calculateId (i) { return this.employees[i].id }
prev() {
console.log("prev");
if (this.index>0) { this.index -= 1 }
}
next() {
console.log("next");
if (this.index < this.employees.length-1){this.index +=1}
}
}
customElements.define(MyTest.is, MyTest);
Demo