[Vuejs]-On selected drop-down change, show modal from API response

by

0👍

You can use computed to extract html

computed: {
  freqHtml() {
    if (!this.freq || !this.frequencies) {
      return ''
    }
    const item = this.freq.find(f => f.code === this.frequencies)
    if (item && item.formFields && item.formFields.length) {
      return item.formFields[0].html
    }
    return ''
  }
}

then inject to template using v-html

<div class="form-group">
    <label class="col-form-label">Frequency</label>
    <select v-model="frequencies" id="frequency" class="form-control">
        <option :value="null">Select Funding Frequency</option>
        <option v-for="pm in freq" :value="pm.code" v-on:change="onFreqChange">{{pm.name}}</option>
    </select>
    <div v-html="freqHtml"></div>
</div>

Leave a comment