[Vuejs]-VueJS js how to show dynamic form

by

0👍

Thanks to help from @Boussadjra Brahim, I found a solution using async components.

Here is the amended code:

<template>
  <b-container v-if="show">
    <b-row>
      <b-col class="map-dialog" cols="12" sm="6" md="4" >
        <h3>{{ title }}</h3>
        <FormFields/>
        <b-button v-on:click="hide">Close</b-button>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
import Vue from 'vue/dist/vue.js'
export default {
  props: {
    show: Boolean,
  },
  data() {
    return {
      title: null,
      fields: null,
    }
  },
  mounted() {
    Vue.component('FeatureFields', function (resolve, reject) {
      resolve({
        template: '<b-form-input  type="text" placeholder="Enter your name"></b-form-input>'
      })
    });
  },
}

I also needed to change import Vue from 'vue' to import Vue from 'vue/dist/vue.js so that it would compile the template.

👤minisaurus

Leave a comment