jeudi 5 décembre 2019

How can I keep the state of radio buttons intact when looping through in ember?

I have a json file of questions in my public folder. I parsed that in my router and send it to my questionnaire template as theQuestions I want to loop through all the questionnaires on next and previous click. However I want the value to be highlighted when the user press previous button. I am storing the values on in an array storedValues when the user press next button.

This is my component-class

@tracked incrementQuestion = -1;
@tracked choicesHolder;
@tracked marked;
@tracked storedValues;


@action change(event) {
  this.marked = event.target.value;
}

//on Next Button Click
@action next() {
  if (this.incrementQuestion < this.args.theQuestions.length - 1) {
    this.choicesHolder = [];
    this.incrementQuestion++;

    this.args.theQuestions[this.incrementQuestion].choices.forEach(element => {
      this.choicesHolder.push(element.value);
    });
    this.storedValues[this.incrementQuestion] = this.marked;
    this.marked = null;
  }
}

//On Previous Button Click
@action previous() {
  if (this.incrementQuestion > 0) {
    this.choicesHolder = [];
    this.incrementQuestion--;

    this.args.theQuestions[this.incrementQuestion].choices.forEach(element => {
      this.choicesHolder.push(element.value);
    });

  }
}

This is my template


<Input id="admin" @name="choices" @value= @type="radio"  />
<label for="admin"></label> 


<button onclick=>Previous</button>
<button onclick=>Next</button>

this.args.theQuestions is coming from route




Aucun commentaire:

Enregistrer un commentaire