使用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要重设为旧状态。这些输入元素的值是非反应性数据，在我的应用程序中不存在。

所以总结一下：

1. 将商品数量从2更改为3
2. 购物车通过AJAX刷新
3. 将新的HTML插入到DOM中（而不是“ Vue-way”）
4. 更改componentKey以重新呈现组件
5. 可见旧的输入值。

有人知道如何解决此问题或解决此问题的方法吗？

Answer 1

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

最正确的方法可能是实现Vuex存储并在那里更新变量，然后刷新表单并重新呈现组件。然后使用mounted()或created()方法从存储中拉出变量。

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

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

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

Answer 2

问题是，Vue不仅会重置输入的值，还会将整个HTML重置为先前的状态。因此，整个新标记将被旧标记覆盖。我已经决定这不是要走的路。

我已经将整个Woocommerce购物车重新创建为Vue组件，现在一切正常。不再需要AJAX调用，一切都将即时发生变化。