materio-d8/web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

<script>

import Vue from 'vue'
import { MSAPI } from 'vuejs/api/msapi-axios'

export default {
  data() {
    return {
      template: null,
      typed: ""
    }
  },
  props: ['form'],
  methods: {
    keyup() {
      console.log("search typed", this.typed);
    },
    submit() {
      console.log("search clicked");
    }
  },
  beforeMount() {
    console.log('SearchForm beforeMount');
    if(this._props.form){
      console.log('SearchForm beforeMount if this._props.form ok');
      this.template = Vue.compile(this._props.form).render
    }
  },
  beforeUpdate() {
    console.log('SearchForm beforeUpdate');
    if(this._props.form){
      console.log('SearchForm beforeUpdate if this._props.form ok');
      this.template = Vue.compile(this._props.form).render
    }
  },
  mounted(){
    console.log('SearchForm mounted');
    // Drupal.attachBehaviors(this.$el);
  },
  updated(){
    console.log('SearchForm updated');
    // Drupal.attachBehaviors(this.$el);
  },
  render(h) {
    console.log('searchForm render');
    if(!this.template){
      return h('span', 'Loading ...')
    }else{
      return this.template()
    }
  }
}
// searchform: (resolve, reject) => (
//   MSAPI.get(`/search_form`)
//     .then(({data}) => {
//       // console.log("materiosapisearchform", data);
//       resolve({
//         data() {
//           return {
//             typed:""
//           }
//         },
//         methods: {
//           keyup() {
//             console.log("search typed", this.typed);
//           },
//           submit() {
//             console.log("search clicked");
//           }
//         },
//         mounted() {
//           Drupal.attachBehaviors(this.$el);
//         },
//         template: data.rendered
//       })
//     })
//     .catch(( error ) => {
//         console.warn('Issue with get searchform', error)
//         Promise.reject(error)
//     })
//
// )
</script>

<style lang="scss" scoped>


</style>