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

Question

I'm quite new to Vue.js & Buefy and I believe I understand why this happens but have no idea how to fix it.

I have a list of project partners sorted by country and I need to output a list with checkboxes (I'm using Buefy on the page anyway) and country names as title (only when there's a "new" country). This ends with browser doing infinite loop (verified with console.log) and Vue Devtools gives warning "You may have an infinite update loop in a component render function".

I believe this happens because changing prevTitle triggers re-rendering. I know it's not possible to pass parameters to computed properties and I haven't been able to use any of the tricks I've found to make partner.country available there.

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>

Then I tried to make a computed property where I do all processing instead of for loop in template and return a string that contains everything, including Buefy tags, which would be called

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

But those Buefy tags don't get rendered properly, only HTML tags work, browser ignores Buefy tags showing the normal text only.

Any ideas how get this working? For time being I print country names for each partner after name etc. but it's not how this is supposed to work.

Answer 1

v-html doesn't evaluate Vue (or in this case Buefy) components, only regular HTML tags.

Your first approach wasn't that bad, but instead of calling a method inside the v-for you can add a computed property in the items that tells if the country should be rendered:

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

New app:

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
      }