Невозможно перерисовать html в компоненте vee-validate - PullRequest
Новая
       36

Невозможно перерисовать html в компоненте vee-validate

1 голос
/ 27 января 2020

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

У меня есть кнопка, которая выведет sh новый элемент в форму . запрос (данные в приложении vue) на событие клика. И если form.demand update, html in v-for должно быть обновлено. После того, как я заверну его в компонент vee-validate, он не будет работать. form.demand будет обновляться, но v-for не будет. Я пытаюсь поставить тот же html в тест-компонент, когда form.demand update, v-for update тоже. Я не могу понять, почему ...

следующий мой код:

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>

javascript

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

Vue.component('test-component',{
    template: `
        <div>
            <slot></slot>
        </div>
    `
})

var app = new Vue({
    el: "#content",
    data: {
        form: {
            demand: [],
        },
    },
    methods: {
        addDemand(){
            this.form.demand.push({
                name : "demand name",
                count: 1
            })
        }
})

------------ Попробуйте использовать компьютер и добавить: ключ ---------------- Это все еще не работает. Я получаю тот же результат после этого изменения.

HTML

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

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

Javascript

var app = new Vue({
        el: "#content",
        // .......omitted
        computed:{
            computed_demand() {
                return this.form.demand;
            }
        },
    })

Я думаю, что нашел проблему: импорт Vue из двух разных источников. В HTML я импортирую Vue из CDN. И импортируйте vee-validate следующим образом:

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

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <!-- at end of body -->
    <script src="/static/javascripts/main.js" type="module"></script>
</body>

После того, как я исправлю это (импортируйте vee-validate из cdn или импортируйте Vue с помощью модуля ES6). Он работает, хотя все еще имеет бесконечную проблему l oop с vee-validate.

Извините, я не заметил, что импорт vue из двух разных источников.

1 Ответ

0 голосов
/ 27 января 2020

Пожалуйста, предоставьте ключ 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>

Или создайте вычисляемое свойство, которое будет содержать ваш массив form.demands, например этот 

computed: {
   form_demands: function() {
     return this.form.demand
  }
}

, затем вызовите это вычисленное свойство в вашем 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>

Или используйте метод vue forceUpdate 

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

Затем в своем компоненте просто вызовите метод после добавления требования 

this.$forceUpdate();

Рекомендуется предоставлять ключ с v-for всякий раз, когда это возможно, за исключением случаев, когда повторяющееся содержимое DOM является простым или вы намеренно полагаетесь на поведение по умолчанию для повышения производительности.

...