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

<script>

import Vue from 'vue'

import { mapState, mapActions } from 'vuex'

export default {
  props: ['form'],
  data() {
    return {
      template: null
      // keys: "",
      // autocomplete: ""
    }
  },
  computed: {
    // ...mapState(['Search'])
    // ...mapState({
    //   // keys: state => state.Search.keys,
    //   autocomplete: state => state.Search.autocomplete
    // }),
    keys: {
      get(){
        return this.$store.state.Search.keys
      },
      set(value){
        this.$store.commit('Search/setKeys', value)
      }
    },
    autocomplete: {
      get(){
        return this.$store.state.Search.autocomplete
      },
      set(value){
        this.$store.commit('Search/setAutocomplete', value)
      }
    }

  },
  methods: {
    ...mapActions({
      getResults: 'Search/getResults'
    }),
    submit() {
      console.log("search clicked", this.keys, this.autocomplete);
      this.getResults();
    },
    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>