<template v-slot="default"> <div v-bind:id="blockid"> <SearchForm v-if="displayform" v-bind:form="form"></SearchForm> </div> </template> <script> import qs from 'querystring-es3' import SearchForm from 'vuejs/components/Form/SearchForm' import { mapState, mapActions } from 'vuex' import MA from 'vuejs/api/ma-axios' export default { props: ['blockid', 'formhtml'], data(){ return { form: null } }, computed: { ...mapState({ canSearch: state => state.User.canSearch, keys: state => state.Search.keys, terms: state => state.Search.terms, filters: state => state.Search.filters }), 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(){ console.log('getSearchForm') // var urlParams = new URLSearchParams(window.location.search); // var urlParamsKeys = urlParams.keys() const params = { keys: this.keys, terms: this.terms, //JSON.stringify(this.terms), filters: this.filters } console.log('Search getSearchForm params', params) const q = qs.stringify(params) MA.get(`/materio_sapi/search_form?`+q) .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>