{% extends "base.html" %} {% block header_script_files %} {% endblock %} {% block header %} {{ emit_tep('all_collections_page_header') }} {% endblock %} {% block content %}
{% endblock %} {% block modals %} {{ emit_tep('all_collections_modals') }} {% endblock %} {% block button_container %} {{ emit_tep('all_collections_button_container') }} {% endblock %} {% block script %} Vue.component('collections', { props: ['collections'], template: `
`, data() { return { search: '', } }, computed: { filteredList() { return this.collections.filter(collection => { return collection.collection_name.toLowerCase().includes(this.search.toLowerCase()) }) }, }, delimiters: ["[[","]]"], }) Vue.component('collection', { props: ['collection'], template: `
  • `, data() { return { hover: false, } }, delimiters: ["[[","]]"], }) var app = new Vue({ el: '#app', data: { collections: [], }, created() { /* axios.get('{{ url_for('api.api_get_all_collections') }}') .then(res => this.collections = res.data.results) .catch(err => console.log(err)) */ this.getCollections() }, methods: { getCollections() { axios.get('{{ url_for('api.api_get_all_collections') }}', { params: { offset: this.collections.length } }) .then(res => { if(res.data.number_of_page_results > 0) { res.data.results.forEach(result => { this.collections.push(result) }) if(this.collections.length < res.data.number_of_total_results) { this.getCollections() } } }) }, }, delimiters: ["[[","]]"] }) {{ emit_tep('all_collections_page_script') }} {% endblock %}