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

<script>

import Vue from 'vue'

import router from 'vuejs/route'

import { mapState, mapActions } from 'vuex'

export default {
  router,
  props: ['form'],
  data() {
    return {
      template: null,
      keys: "",
      autocomplete: ""
    }
  },
  methods: {
    ...mapActions({
      newSearch: 'Search/newSearch'
    }),
    submit() {
      console.log("search clicked", this.keys, this.autocomplete);
      this.newSearch(this.keys, this.autocomplete)
        .then(() => {
          this.$router.push({name:'base'})
        });
    },
    onAutoCompleteSelect(event, ui){
      event.preventDefault();
      // console.log('autoCompleteSelect', event, ui);
      this.keys = ui.item.label
      this.autocomplete = ui.item.value
    }
  },
  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)
      // https://github.com/vuejs/vue/issues/9911
      this.$options.staticRenderFns = [];
      this._staticTrees = [];
      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
    }
  },
  watch: {
    keys(){
      console.log('keys changed', this.keys);
    }
  },
  mounted(){
    // console.log('SearchForm mounted');
    Drupal.attachBehaviors(this.$el);
    // Catch the jquery ui events for autocmplete widget
    jQuery(this.$el.querySelector('#edit-search')).on('autocompleteselect', this.onAutoCompleteSelect);
  },
  render(h) {
    // console.log('searchForm render');
    if(!this.template){
      return h('span', 'Loading ...')
    }else{
      return this.template.render.call(this)
    }
  }
}
</script>

<style lang="scss" scoped>


</style>