Updating a bootstrap-vue b-form-radio-group with previous selections

Get Help
#1

I can not for the life of me figure this out.

I have a bootstrap vue radio form group which updates a v-model correctly.

                        <b-form-radio-group
                    @change="checkAnswer(question)"
                        :options="question.answer_actions.options"
                        :required=true
                        v-model="answers.answers[question.id]"
                        class="mb-3"
                        value-field="id"
                        text-field="text"
                        disabled-field="notEnabled"
                        size="lg"
                        stacked
                    ></b-form-radio-group>

export default {
    data() {
        return {
            questions: {},
            answers: { warnings: {}, answers: {}, notes: {}},

        }
    },

However, when populating the answers{} data on load from ajax, I can see the changes in vue debug, however they are not reflected or picked up by the radio buttons.

            axios.get('/api/latestResponse/' + this.gResponse.id)
                .then(response_p => {                    
                   response_p.data.result.forEach(function(r) { vm.answers.answers[r.question_id] = r.answer; vm.answers.notes[r.question_id] = r.note })

I have tried everything, created() vs mounted() vs updated(), nextTick etc but nothing is selecting the raido buttons by default.

#2

I have been playing around with this today and it seems that the options do not become reactive or detected until a change to the v-model has been made in the DOM. I.e. if I manually change the value of a radio button, all changes are then detected and populated.
This is also happening with a div, so it is not just the form-group or some limitation with that.

Any ideas?

#3

I had a similar issue and tried quite a few different solutions. What worked for me was setting the value of :checked programatically. Something like the following might work (might have to tweak it):

<b-form-radio-group
  :checked="answers.answers[question.id]"
  @change="checkAnswer(question)"
  :options="question.answer_actions.options"
  :required=true
  v-model="answers.answers[question.id]"
  class="mb-3"
  value-field="id"
  text-field="text"
  disabled-field="notEnabled"
  size="lg"
  stacked
></b-form-radio-group>