CODEWITHSUNDEEP
jsonvue.js
Dmitry Bubnenkov
Dmitry Bubnenkov

Reputation: 9869

How to change value of nested JSON with Vue $set?

[
  {
    "id": 1, 
    "question": "Top Level question", 
    "answers": [
      {"id" : 1, "isSelected" : false}, 
      {"id" : 2, "isSelected" : true}, 
      {"id" : 3, "isSelected" : false}, 
      {"id" : 4, "isSelected" : false}, 
      {"id" : 5, "isSelected" : false}, 
      {"id" : 6, "isSelected" : false}
    ],
    "MaxAllowedChoice" : 1,
    "isEnabled" : true,
    "NowSelected" : 0
  }
]

I wrote next loop:

for (let question of this.questions) {
  //console.log(question.answers); // array of answers

  for(let answer of question.answers) {
    //this.$set('answer.isSelected', true);
    console.log('Before: ', answer.isSelected);
    // this.$set('answer.isSelected', true); //warning: You are setting a non-existent path "answer.isSelected"
    this.$set('questions.answers.answer.isSelected', true);  // so look like I should to do like this to change value
    // this.$set('questions.answers.answer.isSelected', true); //I can't understand how to write it's correctly... like this or above. 
    console.log('After: ', answer.isSelected);
  }
}

I need to change all values to true (or is it's possible to change true<->false and vice versa). I can't understand how to reach needed key. this.$set('answer.isSelected', true); produce warning, and look like it can't undestand what key it should change.

this.$set('questions.answers.answer.isSelected', true); do not produce warining, but I am not sure that it's change value in right place. Because I see in console:

Before: false
After: false
Before: true
After: true

But all values in my code should be set to true.

Upvotes: 3

Views: 2560

Answers (1)

Peter
Peter

Reputation: 12711

If I understand correctly, you shouldn't need to use this.$set(). You should be able to set the property directly on the current answer in each iteration:

for(let question of this.questions) {
    for(let answer of question.answers) {
        answer.isSelected = true;
    }
}

If you really need to use $set() (which might make sense in some scenarios), you'll have to use the array indexes in the keypath:

this.$set('questions[0].answers[0].isSelected', true);

Upvotes: 2

Related Questions