How to re-call .rating() function on new DOM elements with Vue.JS

[buglinjo]

I have a problem. I'm using Vue.js and Laravel to paginate. I have Vue.js code:

new Vue({
            el: '.container',
            data: {
                reviews: [],
                pagination: {}
            },
            created: function () {
                this.fetchStories();
            },
            methods: {
                fetchStories: function (page_url) {
                    let vm = this;
                    page_url = page_url || '{{ route('admin.products.get-all-reviews') }}';
                    this.$http.get(page_url)
                        .then(function (response) {
                            vm.makePagination(response.data);
                            vm.reviews = response.data.data;
                        }).then(function () {
                            $('.container').find('.all-reviews-rating').rating();
                        });
                },
                makePagination: function(data){
                    let pagination = {
                        current_page: data.current_page,
                        last_page: data.last_page,
                        next_page_url: data.next_page_url,
                        prev_page_url: data.prev_page_url
                    };
                    this.pagination = pagination;
                }
            }
        });

I'm calling $('.container').find('.all-reviews-rating').rating(); after fetching data, but when I get second page it leaves first element's value to second page:

First Page:

Second Page:

As you can see. On the second page I have 1 star but it get's 5 stars. In HTML in input value it displays correctly.

[dreyescat]

Uhm, I think that they are not actually new DOM elements but existing ones that are being modified/updated. I suspect that because it seems that the second and subsequent calls to rating() are being ignored. It is because the plugin prevents multiple instantiations.

Could you try to destroy the instances before recreating them again? Something like this:

$('.container').find('.all-reviews-rating').each(function () {
  // This is internal plugin structure that we will move to the destroy method
  $(this).prev().remove();
  $(this).removeData('rating');
});
$('.container').find('.all-reviews-rating').rating();

If it works we could just add a destroy method to the plugin.