Re-render Vue component with dynamic HTML from AJAX call

Question

I have a Vue component 'FullCart' with a default slot like so:

<template>
  <div>
    <slot></slot>
  </div>
</template>

This is only used to wrap the cart of a Woocommerce site.

<full-cart :key="componentKey">
  <form>
    <!-- woocommerce cart -->
  </form>
</full-cart>

After updating an item in the cart the view updates through AJAX and the old form gets replaced with the contents of the new form. This behaviour is provided by Woocommerce and out of my hands.

By changing the 'componentKey' property, after the new HTML is inserted, the FullCart component is re-rendered and all child components present in the new HTML are rendered by Vue. So far so good. ????

The problem is that, as soon the component re-renders, any input elements (like item quantities) reset to the values before the AJAX call was made. As if Vue wants to reset to the old state. The values of those input elements is non-reactive data, not present in my app.

So to summarize:

Change item quantity from 2 to 3
Cart refreshes through AJAX
New HTML is inserted into the DOM (not the "Vue-way")
Change componentKey to re-render the component
Old inputs values are visible.

Does anyone know how to fix this or a way around this?

I think so. There are child components inside the new HTML (after refreshing the cart) that would not be rendered otherwise. — David
Also, if your form is being rendered by Woocommerce and is coming back with old data, are they storing the incorrect values or are the values being populated by your full-cart component? — Jamie T
The form is coming back with correct values but they are overridden with the old 'state' by Vue upon rerendering. — David
I just wonder why Vue behaves this way. Here's a fiddle that showcases this behaviour: jsfiddle.net/26pyqfr8 Press the button and watch the state 'reset' after 2 seconds. — David

Jamie T Jamie T · Accepted Answer · 2019-10-23T19:58:42

Based on your response in the comments, I think you have a few options.

The most correct way would probably be to implement a Vuex store and update the variables there before refreshing the form and re-rendering the component. Then pull the variables from the store in either the mounted() or created() method.

The easier option would be to store the variables in a parent or root component. All Vue instances can access the root data object via this.$root.data. So you could update this.$root.data.quantity, then update and re-render your form component, and then update your quantity field with the value from this.$root.data.quantity.

Go with the second option if it's a small or short term project, but the first would likely be considered proper.

Edit - I've updated your fiddle with the method I described above where you store the inputValue in the $root Vue component: https://jsfiddle.net/u39ap2hm/

Re-render Vue component with dynamic HTML from AJAX call

2 Answers