Vue.JS Initialise New DOM Elements - Drupal

user_4367223 0
Viewed 130

So I have a Drupal 8 site which leverages Vue.JS to render all sorts on each and every page. There are lots of Vue.JS components which rely on data such as the user's basket (it's an e-commerce site).

I'm facing an issue where I'm using a Drupal View to query and show the data to the user, in this case it's showing products on a page. This Drupal View is using AJAX to paginate and filter the results. The first load is done server-side, but paginating or filtering is done via AJAX.

Now, these products that come back are shown as 'cards', and the cards contain a Vue.JS component which is basically the quantity selection and add to basket button which handles that flow.

The issue is if Drupal reloads the DOM elements (product cards), the Vue.JS 'add to basket' component isn't rendered via Vue.JS. I know why this is and ideally, Vue.JS should be the thing driving the product lists and querying a Drupal API endpoint, but then I'd lose out on the Drupal niceties like server-side rendering of the first load, pagination, searching, filtering etc.

So my question: Can I do something to let Vue.JS know that components have changed on the page and have Vue.JS render them?

vue.js drupal
1 Answers

I think you're looking for drupal behaviors.

It triggers when a request is done (wich includes ajax and page load).

I think the code will be something like this:

Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {

   //context will throw the ajax response.  
   //You can check in the context var 
   //if the response is the one you need to trigger vuejs
   console.log(context);
   MyvueInstance.load_my_data(context); //or whatever you need to say to Vuejs...
  }
};

Check the api:

https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview

user_64951640
Related