使用来自 AJAX 调用的动态 HTML 重新渲染 Vue 组件

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 渲染。 到目前为止，一切都很好。

问题是，一旦组件重新渲染，任何输入元素（如项目数量）都会重置为调用 AJAX 之前的值。 好像 Vue 想重置为旧的 state。 这些输入元素的值是非反应性数据，不存在于我的应用程序中。

所以总结一下：

1. 将项目数量从 2 更改为 3
2. 购物车通过 AJAX 刷新
3. 将新的 HTML 插入 DOM（不是“Vue 方式”）
4. 更改 componentKey 以重新渲染组件
5. 旧输入值可见。

有谁知道如何解决这个问题或解决这个问题？

Answer 1

根据您在评论中的回复，我认为您有几个选择。

最正确的方法可能是在刷新表单和重新渲染组件之前实现一个 Vuex 存储并在那里更新变量。 然后在mounted()或created()方法中从存储中提取变量。

更简单的选择是将变量存储在父组件或根组件中。 所有 Vue 实例都可以通过this.$root.data访问根数据 object 。 所以你可以更新this.$root.data.quantity ，然后更新并重新渲染你的表单组件，然后用this.$root.data.quantity的值更新你的数量字段。

Go 如果是小型或短期项目，则使用第二个选项，但第一个可能被认为是合适的。

编辑 - 我已经用我上面描述的方法更新了你的小提琴，你将 inputValue 存储在 $root Vue 组件中： https://jsfiddle.net/u39ap2hm/

Answer 2

问题是，Vue 不仅重置了输入的值，它还将整个 HTML 重置为之前的 state。 所以整个新标记被旧标记覆盖。 我已经决定这不是通往 go 的方式。

我已经将整个 Woocommerce 购物车重新创建为 Vue 组件，现在一切都按预期工作。 不再有 AJAX 调用，一切都在动态变化。