How to append to an element the HTML received via JSON API?

You probably just need to escape your code? So if its Blade you would do something like this:

<div>
{!! $rendered_thing }
</div>

If its vue:

<div v-html="rendered_thing"></div>

EDIT:

Maybe you have to do this instead actually:

{!!html_entity_decode($rendered_thing)!!}

See this thread: https://laracasts.com/discuss/channels/general-discussion/rendering-html-from-database-table-to-view-blade-issue-or

Thanks @Reached . But I'm not able to understand how to change my code.

Note that I'm using this strategy now

this.$refs.the_container.append 

Because into the_container I already have the first 30 products, already rendered server-side.

This because when user load the page, the first 30 products are already on the page.

When user scroll down, at a fixed point I trigger ther ajax loading of another set of products. I need to add the new html block to what already is rendered.

So I can't resolve the problem server-side at the first call (a normal get).

I need that on sobsequent ajax call, when Laravel code send me raw html, I can append to what is already on the page.

@realtebo did you figure it out?

Yes.. it's working, cross-browser (Edge, ie11, chrome, ff, safari) but I'am disgusted of the solution ....

I added also a throttle, triggered on leading, and two controls to avoi overlapping the same requests.

        const family_vue_app = new Vue({

            {{-- Defined int layouts.app.balde --}}
            el: '#app',

            data: {
              'url'     : '{!! $next_page_link !!}',
              'loading' : false,
            },

            methods: {
                handleScroll :  _.throttle(
                    {{-- Do not use arrow functions here, IE11 will complain !--}}
                    function() {
                        let trigger_pos = document.getElementById('load_more').getBoundingClientRect().top;
                        if (trigger_pos < 3000) {
                            family_vue_app.callAjax();
                        }
                    }, 1000, { leading: true}
                ),
                callAjax : function () {

                    Vue.http.get(family_vue_app.url, {
                        before : function (request) {
                            if (this.previousUrl === family_vue_app.url) {
                                console.log ('aborting previous request [same url] ');
                                this.previousRequest.abort();

                            }
                            if (this.previousRequest) {
                                console.log ('aborting previous request [another request is alive] ');
                                this.previousRequest.abort();
                            }
                            family_vue_app.loading = true;
                            this.previousRequest = request;
                            this.previousUrl = family_vue_app.url;
                        }
                    }).then( function (response) {
                        // success callback
                        family_vue_app.url = response.body.next_page_link;
                        if (family_vue_app.url === null) {
                            window.removeEventListener('scroll', family_vue_app.handleScroll);
                        }
                        document.getElementById('family_boxes_container').innerHTML += response.body.rendered_view;
                        this.previousRequest = null;
                        family_vue_app.loading = false;

                    }, function(response) {
                        // error callback

                    });
                }

            },
            created : function () {
                window.addEventListener('scroll', this.handleScroll);
            },
            destroyed : function () {
                window.removeEventListener('scroll', this.handleScroll);
            }
        });