Перерисовать компонент Vue с динамическим HTML из вызова AJAX

Question

У меня есть компонент Vue 'FullCart' со слотом по умолчанию, например:

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

Используется только для упаковки корзины на сайте Woocommerce.

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

ПослеПри обновлении элемента в корзине представление обновляется через AJAX, и старая форма заменяется содержимым новой формы. Такое поведение обеспечивается Woocommerce и не в моих руках.

Изменяя свойство 'componentKey', после вставки нового HTML-компонента компонент FullCart повторно визуализируется, и все дочерние компоненты, присутствующие в новом HTML,предоставленный Vue. Все идет нормально. 100

Проблема заключается в том, что, как только компонент перерисовывается, любые входные элементы (например, количества элементов) сбрасываются на значения до того, как был выполнен вызов AJAX. Как будто Vue хочет сбросить в старое состояние. Значения этих входных элементов являются нереактивными данными, которых нет в моем приложении.

Итак, подведем итог:

1. Измените количество элементов с 2 на 3
2. Обновление корзины через AJAX
3. В DOM вставлен новый HTML-код (не «Vue-way»)
4. Измените componentKey для повторного рендеринга компонента
5. Старые входные значениявидимый.

Кто-нибудь знает, как это исправить или как обойти это?

Answer 1

Дело в том, что Vue не только сбрасывает значение ввода, но и сбрасывает весь HTML в предыдущее состояние. Таким образом, вся новая разметка перезаписывается старой разметкой. Я решил, что это просто не тот путь.

Я воссоздал всю корзину Woocommerce как компонент Vue, и теперь все работает, как и ожидалось. Больше никаких вызовов AJAX, все меняется на лету.

Answer 2

Исходя из вашего ответа в комментариях, я думаю, что у вас есть несколько вариантов.

Вероятно, наиболее правильным способом было бы реализовать хранилище Vuex и обновить там переменные перед обновлением формы и повторным рендерингом. компонент. Затем извлеките переменные из хранилища либо методом mounted(), либо created().

Более простой вариант - сохранить переменные в родительском или корневом компоненте. Все экземпляры Vue могут получить доступ к корневому объекту данных через this.$root.data. Таким образом, вы можете обновить this.$root.data.quantity, затем обновить и повторно визуализировать компонент формы, а затем обновить поле количества со значением this.$root.data.quantity.

Перейдите ко второму варианту, если он небольшой или краткосрочныйпроект, но первый, скорее всего, будет считаться правильным.

Редактировать - я обновил вашу скрипку с помощью метода, описанного выше, где вы сохраняете inputValue в компоненте $ root Vue: https://jsfiddle.net/u39ap2hm/