materio-d8/web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue

<template v-slot="default">
  <div v-bind:id="blockid">
    <SearchForm
      v-if="displayform"
      v-bind:form="form"></SearchForm>
  </div>
</template>

<script>
import SearchForm from 'vuejs/components/Form/SearchForm'
import { mapState, mapActions } from 'vuex'
import { MSAPI } from 'vuejs/api/msapi-axios'

export default {
  props: ['blockid', 'formhtml'],
  data(){
    return {
      form: null
    }
  },
  computed: {
    ...mapState({
      canSearch: state => state.User.canSearch
    }),
    displayform(){
      console.log('computed displayform');
      return this.canSearch && this.form
    }
  },
  beforeMount() {
    console.log('SearchBlock beforeMount');
    this.form = this.formhtml
  },
  watch: {
    canSearch(new_value, old_value) {
      console.log('canSearch changed, old: '+old_value+", new: "+new_value);
      if(new_value && !this.form){
        this.getSearchForm()
      }
      if(!new_value && this.form){
        this.form = null
      }
    }
  },
  methods: {
    getSearchForm(){
      MSAPI.get(`/search_form`)
        .then(({data}) => {
          console.log("getSearchForm");
          this.form = data.rendered
        })
        .catch(( error ) => {
            console.warn('Issue with get searchform', error)
        })
    }
  },
  components: {
    SearchForm
  }
}
</script>

<style lang="scss" scoped>

</style>