Javascript Can'；t在vee validate组件中重新呈现html

Vue.js v2.6.11/vee validate v3.2.2

我有一个按钮，可以在单击事件时将新元素推送到表单。请求（vue应用程序中的数据）。 如果form.demand更新，则应更新v-for中的html。 在我用vee validate组件包装它之后，它就不起作用了。 表单。需求将更新，但v-for不会更新。 当表单时，我尝试在测试组件中放入相同的html。demand更新，v-for更新。 我不明白为什么

以下是我的代码：

HTML

<div id="content">
<test-component>
  <div v-for="demand in form.demand">{{demand}}</div>
</test-component>

<validation-provider rule="" v-slot="v">
  <div @click="addDemand">new</div>

  <div v-for="(demand,index) in form.demand">
      <div>{{demand.name}}</div>
      <div>{{demand.count}}</div>
      <input type="text" :name="'demand['+index+'][name]'" v-model="form.demand[index].name" hidden="hidden" />
      <input type="text" :name="'demand['+index+'][count]'" v-model="form.demand[index].count" hidden="hidden" />
  </div>
</validation-provider>
</div>

<validation-provider rule="" v-slot="v">
      <div @click="addDemand">new</div>

      <div v-for="(demand,index) in computed_demand" :key="index">
           <!--.........omitted.........-->
</validation-provider>

我想我发现了问题：从两个不同的源导入Vue。在HTML中，我从cdn导入Vue。并导入vee验证，如下所示：

vee-validate.esm.js

import Vue from './vue.esm.browser.min.js';
/*omitted*/

validator.js

 import * as VeeValidate from './vee-validate.esm.js';
    export { veeValidate };

main.js

// I didn't import Vue from vue in this file
import { veeValidate as VeeValidate } from './validator.js';

Vue.component('validation-provider', VeeValidate.ValidationProvider);

HTML

修复此问题后（从cdn导入vee验证，或通过ES6模块导入Vue）。 虽然vee validate仍然存在无限循环问题，但它仍然可以工作

---

抱歉，我没有注意到从两个不同的源导入vue。

请在您的v-for中提供密钥。请参阅下面的代码

<div v-for="(demand,index) in form.demand" :key="index">
      <div>{{demand.name}}</div>
      <div>{{demand.count}}</div>
      <input type="text" :name="'demand['+index+'][name]'" v-model="form.demand[index].name" hidden="hidden" />
      <input type="text" :name="'demand['+index+'][count]'" v-model="form.demand[index].count" hidden="hidden" />
  </div>

然后在v-for中调用这个计算属性

<div v-for="(demand,index) in form_demands" :key="index">
      <div>{{demand.name}}</div>
      <div>{{demand.count}}</div>
      <input type="text" :name="'demand['+index+'][name]'" v-model="form.demand[index].name" hidden="hidden" />
      <input type="text" :name="'demand['+index+'][count]'" v-model="form.demand[index].count" hidden="hidden" />
</div>

然后在组件中，在添加需求后调用该方法

this.$forceUpdate();

建议尽可能提供带v-for的钥匙， 除非迭代的DOM内容很简单，或者您有意 依靠默认行为获得性能提升

---

请在您的v-for中提供一把钥匙。请参阅下面的代码

<div v-for="(demand,index) in form.demand" :key="index">
      <div>{{demand.name}}</div>
      <div>{{demand.count}}</div>
      <input type="text" :name="'demand['+index+'][name]'" v-model="form.demand[index].name" hidden="hidden" />
      <input type="text" :name="'demand['+index+'][count]'" v-model="form.demand[index].count" hidden="hidden" />
  </div>

然后在v-for中调用这个计算属性

<div v-for="(demand,index) in form_demands" :key="index">
      <div>{{demand.name}}</div>
      <div>{{demand.count}}</div>
      <input type="text" :name="'demand['+index+'][name]'" v-model="form.demand[index].name" hidden="hidden" />
      <input type="text" :name="'demand['+index+'][count]'" v-model="form.demand[index].count" hidden="hidden" />
</div>

然后在组件中，在添加需求后调用该方法

this.$forceUpdate();

建议尽可能提供带v-for的钥匙， 除非迭代的DOM内容很简单，或者您有意 依靠默认行为获得性能提升

---

这很可能是反应性问题。如果使用vuex，请使用getter获取

表单

对象。否则，请创建一个计算属性，而不是使用

方法addDemand

谢谢。我没有使用vuex。我修改了我的代码，使用了计算值，但仍然不起作用。这很可能是反应性问题。如果使用vuex，请使用getter获取

表单

对象。否则，请创建一个计算属性，而不是使用

方法addDemand

谢谢。我没有使用vuex。我修改了我的代码，使用了计算值，但仍然不起作用。谢谢你的回答。我已经按照你的建议修改了代码。但我得到了同样的结果。我在测试组件中也做同样的事情，这是工作。也许这是vee验证问题？很抱歉，我没有注意到从两个不同的源导入vue。我已经更新了我的问题。也许这就是原因。谢谢你的回答。我已经按照你的建议修改了代码。但我得到了同样的结果。我在测试组件中也做同样的事情，这是工作。也许这是vee验证问题？很抱歉，我没有注意到从两个不同的源导入vue。我已经更新了我的问题。也许这就是原因。

import Vue from 'vue';
Vue.forceUpdate();

this.$forceUpdate();