My journey with Vue.js & Buefy is just beginning and I've encountered an issue that has left me scratching my head.
I have a list of project partners organized by country, and I'm trying to display a list with checkboxes (with Buefy) and country names as titles (only when a new country is encountered). However, this seems to be causing an infinite loop in the browser (confirmed with console.log), and Vue Devtools throws a warning about a potential "infinite update loop in a component render function".
I suspect that the issue arises from triggering re-rendering when changing `prevTitle`. Despite my attempts, I haven't been able to find a way to make `partner.country` available inside computed properties or implement any workaround successfully.
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>
To address this, I attempted to consolidate all processing into a computed property instead of using a for loop in the template. I aimed to return a string containing everything, including Buefy tags, which would then be called:
<span v-html="printPartnerList"></span>
Unfortunately, Buefy tags are not rendered correctly; only HTML tags show up while Buefy tags are ignored, displaying plain text. Any suggestions on how to resolve this? Currently, I'm resorting to printing country names after each partner's name, which isn't ideal.