How to render option values as HTML for q-option-group?



  • Hello,

    I have a q-option group that holds a dynamic set of values:

    <div>
      <q-option-group
         v-model="group"
         :options="options"
         color="primary"
      ></q-option-group>
    </div>
    

    And the values are populated like:

    let questionAnswers = this.currentQuestion.Answers
       this.options = []
       for (const [i,v] of questionAnswers.entries()) {
       this.options.push({label: v, value: String(i)})
    }
    

    The problem is that some of the values have html inside the string. Is there a way I can get the q-option-group to render options as html?

    Thanks in advance.



  • You won’t be able to do any formatting with HTML in the options label properties. You’ll need to roll your own options group and then use v-html.

    See this (and the warning of using it).

    https://vuejs.org/v2/guide/syntax.html#Raw-HTML

    Scott



  • Damn I was afraid of that. Was hoping there was a way. Thanks for the help!


Log in to reply