Vue.js is alerting you that there could be an endless update cycle happening within a component's render function

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.

Answer №1

The v-html directive does not interpret Vue (or Buefy) components, only standard HTML elements.

Your initial method was decent, however, rather than invoking a function within the v-for, you can include a computed property in the items determining whether the country should be displayed:

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

New application code:

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

    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
      }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlinking styles from the template in Vue.js

I have a unique situation where my template contains a <style> block that needs to be positioned near its corresponding div due to CMS restrictions. However, when I try to integrate Vue.js into the mix, it appears to strip out the style block and di ...

The share-modal.js file is throwing an error because it is unable to read properties of null, particularly the 'addEventListener' property, at

I encountered an error that I want to resolve, but it's proving to be quite challenging. Despite extensive searching on Google, I haven't found a solution yet. Uncaught TypeError: Cannot read properties of null (reading 'addEventListener&apo ...

Clickable link that directs to a particular tab on a webpage (cbpFWTabs)

I have been utilizing tabs from the codrops Tab Styles Inspiration and I am looking for a way to open specific tabs using URLs. For instance, if I wanted to open tab3, I could link it as www.google.com/index#tab3. Below is the code I am currently using: ...

Is it feasible to animate a JQuery slider?

Is there a way to animate the slider using jQuery? I want to be able to press a button and have the inner part of the slider move slower (e.g. 300ms) without reacting to mouse clicks and slides. Here is the code: http://jsfiddle.net/gm4tG/5/ HTML: <d ...

Sprockets could not locate the file for jquery.atwho

I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...

Creating obstacles in a canvas can add an extra layer of challenges and

I am working on creating a basic platformer game using the code displayed below. window.onload = function(){ var canvas = document.getElementById('game'); var ctx = canvas.getContext("2d"); var rightKeyPress = false; var leftKeyPress = false; ...

Is it possible for a nodejs server to handle both grpc and express servers simultaneously, or do they need to be separate servers?

I'm currently in the process of building a REST server using Node/Express. I'm curious about how to incorporate a GRPC server within the same setup. Would it be possible to run both servers on the same NodeJS instance, or is it recommended to hav ...

Properly handling the use of single and double quotation marks in variable declarations within a JavaScript file

I have a search box where users can enter their search text. For example, they can type book, 'book', or "book". The value entered in the search box is then assigned to a variable in the JavaScript file. var searchTerm = "${searchTerm}"; <br/ ...

JavaScript and CSS failing to implement lazy loading with fade-in effect

Is there a way to add the fade-in animation to an image when it is loaded with JavaScript or CSS? Currently, the code I have only fades in the image once it is 25% visible in the viewport. How can I modify it to include the fade effect upon image load? ...

CORS blocked the JavaScript Image's request

I am encountering an issue with my code that involves capturing selected divs using the HTML2Canvas library. However, when I try to download the captured image file, it is not working as expected. The error message I keep receiving is "Access to Image at ...

Increase numbers with uniform speed using jQuery for each number

I am working on implementing a jQuery script that will visually increase any number from zero to its value using setInterval(). Here is the current solution I have come up with: $('.grow').each(function() { var $el = $(this); va ...

What is the proper way to set up state with localStorage in Nuxt.js when using Universal Rendering?

Unique Situation In my unique setup, I have a specific flow that involves storing a token in localStorage, even though I know it's not the recommended practice. Every time my Nuxt App is launched, I need to retrieve the token from localStorage, valid ...

Performance of obtaining image data

Is anyone else experiencing a significant lag when trying to retrieve the state of a single pixel on the canvas? Take a look at my JS code below: var state = ctx.getImageData(x,y,1,1).data; state = 'rgba(' + state[0] + ',' + state[1] ...

What is the best way to iterate through an Object.entry and multiply one value by another key value within a loop?

I am looking to enhance the functionality of my Vue.js composition API web application by calculating the total number of employed workers in different sectors. However, I want to multiply the number of workers by another key:value property instead of ju ...

Unable to download the jQuery Plugin

I am looking to install a gallery without using flash, and I came across this jQuery plugin called Grid-A-Licious. However, I am having trouble figuring out how to install and use it since it is distributed as a .zip archive with two .js files but no index ...

Encountering difficulties when trying to send requests to an API through AJAX

Our company relies on the software nocrm.io for managing leads and customers. I am looking to integrate their API into our web application to streamline information exchange through GET and POST requests. However, I am facing challenges while trying to mak ...

Can a variable declared in wdio.conf be accessed?

Within the wdio.conf file, I have implemented a function called onPrepare where I am storing all my feature files in an array. let listOfFiles = fs.readdirSync(process.cwd() + '/features'); var featureFiles = []; listOfFiles.map((file) => { ...

Endless repetition occurs when invoking a function within a v-for loop

I've encountered an issue while trying to populate an array using a method, leading to redundant data and the following warning message: You may have an infinite update loop in a component render function. Below is the code snippet in question: ...

React Array Not Behaving Properly When Checkbox Unchecked and Item Removed

When using my React Table, I encountered an issue with checkboxes. Each time I check a box, I aim to add the corresponding Id to an empty array and remove it when unchecked. However, the current implementation is not functioning as expected. On the first c ...

Styling the "Browse" button for different web browsers

Here is the code snippet I am working with: HTML: <form> <input id = "file" type="file" /> <div id="custom_button">custom button</div> </form> Jquery: $("#custom_button").on("click", function () { $("#file"). ...