Vue. js Предупреждает У вас может быть бесконечное обновление l oop в функции рендеринга компонента - PullRequest
Новая
       57

Vue. js Предупреждает У вас может быть бесконечное обновление l oop в функции рендеринга компонента

0 голосов
/ 19 февраля 2020

Я довольно новичок в Vue. js & Buefy, и я думаю, что понимаю, почему это происходит, но не знаю, как это исправить.

У меня есть список партнеров по проекту, отсортированный по страна и мне нужно вывести список с флажками (я все равно использую Buefy на странице) и названия стран в качестве заголовка (только когда есть «новая» страна). Это заканчивается тем, что браузер выполняет бесконечное l oop (проверено с помощью console.log) и Vue Devtools выдает предупреждение «Возможно, у вас есть бесконечное обновление l oop в функции рендеринга компонента».

Я считаю, это происходит потому, что изменение prevTitle запускает повторный рендеринг. Я знаю, что невозможно передать параметры вычисляемым свойствам, и я не смог использовать какие-либо хитрости, которые я нашел, чтобы сделать там доступным partner.country. 

var app = new Vue({
    el: "#app",
    data: {
      prevTitle: ""
    ...

    methods: {
      changeCountryTitle(country) {
        if (country != this.prevTitle) {
          this.prevTitle = country;
          return true;
        }
        return false;
    }

<template v-for="partner in results">
    <div v-if="changeCountryTitle(partner.country)">
        {{ partner.country }}
    </div>
    <b-checkbox ... >{{ partner.name }}, ...</b-checkbox>
    <br />
</template>

Затем я попытался создать вычисляемое свойство, где я выполняю всю обработку вместо l oop в шаблоне и возвращаю строку, содержащую все, включая теги Buefy, которые будут называться 

<span v-html="printPartnerList"></span>

Но эти теги Buefy не отображается неправильно, работают только теги HTML, браузер игнорирует теги Buefy, отображающие только обычный текст.

Есть идеи, как это работает? В настоящее время я печатаю названия стран для каждого партнера после имени et c. но это не так, как это должно работать.

1 Ответ

0 голосов
/ 20 февраля 2020

v-html не оценивает Vue (или в данном случае Buefy) компонентов, только обычные HTML теги.

Ваш первый подход был не таким уж плохим, но вместо вызова метода внутри v-for вы можете добавить вычисляемое свойство в элементах, которые сообщают, следует ли отображать страну: 

<template v-for="partner in computedResults">
    <div v-if="partner.showCountry">
        {{ partner.country }}
    </div>
    <b-checkbox ... >{{ partner.name }}, ...</b-checkbox>
    <br />
</template>

Новое приложение: 

var app = new Vue({
    el: "#app",
    data: {
      // prevTitle: "" <- not needed
    ...

    computed: {
      computedResults() {
        let prevCountry = ''
        let newResults = []
        this.results.forEach(partner => {
          let showCountry = false
          if (prevCountry != partner.country) {
            showCountry = true
          }
          newResults.push({
            ...partner,
            showCountry
          })
          prevCountry = partner.country
        })
        return newResults
      }
...