Vue.js 警告您可能在组件渲染函数中有无限更新循环

Question

我对 Vue.js & Buefy 很陌生，我相信我理解为什么会发生这种情况，但不知道如何解决它。

我有一个按国家排序的项目合作伙伴列表，我需要输出一个带有复选框的列表（无论如何我在页面上使用 Buefy）和国家名称作为标题（仅当有 "new"国家）。这以浏览器执行无限循环结束（使用 console.log 验证）并且 Vue Devtools 发出警告 "You may have an infinite update loop in a component render function".

我相信这是因为更改 prevTitle 会触发 re-rendering。我知道不可能将参数传递给计算属性，而且我无法使用我发现的任何技巧来使 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>

然后我尝试制作一个计算属性，我在其中进行所有处理而不是模板中的 for 循环 return 一个包含所有内容的字符串，包括 Buefy 标签，它将被称为

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

但是那些 Buefy 标签无法正确呈现，只有 HTML 标签有效，浏览器会忽略仅显示普通文本的 Buefy 标签。

有什么想法可以让它发挥作用吗？目前，我在姓名等之后为每个合作伙伴打印国家/地区名称，但这不是应该的工作方式。

Answer 1

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
      }

Vue.js 警告您可能在组件渲染函数中有无限更新循环

Vue.js warns You may have an infinite update loop in a component render function

javascript

vue.js

vuejs2

buefy