You may have an infinite update loop in a component render function

0

This code is a list of links that is used inside a dropdown menu. I started getting this message after I decided to set a color pattern and fonts for my site and I decided to make changes to the components via v-bind.

    <template>
  <ul class="listaV no-margin no-padding" :style="{backgroundColor: lista.bgColor}">
    <li v-for="(item, index) in lista.itensV" class="itemV no-margin no-padding" :style='{backgroundColor: item.texto.bgColor}'>
      <a :href="item.url" :style="{
        color: item.texto.hover ? item.texto.hoverColor : item.texto.color,
        fontFamily: item.texto.fontFamily,
        fontWeight: item.texto.fontWeight,
        fontStyle: item.texto.fontStyle
      }"
      @mouseover="hoverLink($event, item, true)"
      @mouseleave="hoverLink($event, item, false)"><i :class="item.icone.classIco" :style="{color: item.icone.color}"></i>{{item.texto.conteudo}}</a>
    </li>
  </ul>
</template>

<script>
  import css from '../../assets/js/cssDefault.js'
  /*
  {
    bgColor: css.quintenary,
    itensV: [
        {
          url: '#',
          icone: {
            classIco: 'ico-fa-angle-arrow-pointing-to-right',
            color: css.nivelAlpha(css.color.textSecondary, '0.5')
          },
          texto: {
            conteudo: 'Item teste',
            fontFamily: css.font.primary + ', ' + css.font.fallback,
            fontWeight: 'normal',
            fontStyle: 'normal',
            bgColor: css.quintenary,
            color: css.color.textSecondary,
            hoverColor: css.color.secondary,
            hover: false
          }
        }
      ...
      ]
  }
  */
  export default{
    methods: {
      hoverLink: function (event, item, hover) {
        item.texto.hover = hover
        this.$forceUpdate()
      }
    },
    props: {
      lista: {
        type: Object,
        required: true,
        validator: function (lista) {
          let l = {
            bgColor: {
              tipo: 'string',
              padrao: css.quintenary
            },
            itensV: {
              tipo: 'array',
              padrao: ['', '', '', '']
            }
          }
          for (let prop in l) {
            let tipo = typeof lista[prop]
            if (!(prop in lista) || tipo !== l[prop].tipo) {
              lista[prop] = l[prop].padrao
            }
          }

          for (let i = 0; i < lista.itensV.length; i++) {
            let tipo = typeof lista.itensV[i]
            if (tipo !== 'object') {
              lista.itensV[i] = {
                bgColor: css.color.quaternary,
                url: '#',
                icone: {
                  classIco: 'ico-fa-angle-arrow-pointing-to-right',
                  color: css.nivelAlpha(css.color.textSecondary, '0.5')
                },
                texto: {
                  conteudo: 'Item teste',
                  fontFamily: css.font.primary + ', ' + css.font.fallback,
                  fontWeight: 'normal',
                  fontStyle: 'normal',
                  bgColor: css.quintenary,
                  color: css.color.textSecondary,
                  hoverColor: css.color.secondary,
                  hover: false
                }
              }
              continue
            }

            let it = {
              bgColor: {
                tipo: 'string',
                padrao: css.color.quaternary
              },
              url: {
                tipo: 'string',
                padrao: '#'
              },
              icone: {
                tipo: 'object',
                padrao: {
                  classIco: 'ico-fa-angle-arrow-pointing-to-right',
                  color: css.nivelAlpha(css.color.textSecondary, '0.5')
                }
              },
              texto: {
                tipo: 'object',
                padrao: {
                  conteudo: 'Item teste',
                  fontFamily: css.font.primary + ', ' + css.font.fallback,
                  fontWeight: 'normal',
                  fontStyle: 'normal',
                  color: css.color.textSecondary,
                  hoverColor: css.color.secondary,
                  hover: false
                }
              }
            }
            for (let p in it) {
              let tipo = typeof lista.itensV[i][p]
              if (!(p in lista.itensV[i]) || tipo !== it[p].tipo) {
                lista.itensV[i][p] = it[p].padrao
              }
            }

            let ico = {
              classIco: {
                tipo: 'string',
                padrao: 'ico-fa-angle-arrow-pointing-to-right'
              },
              color: {
                tipo: 'string',
                padrao: css.nivelAlpha(css.color.textSecondary, '0.5')
              }
            }
            for (let p in ico) {
              let tipo = typeof lista.itensV[i].icone[p]
              if (!(p in lista.itensV[i].icone) || tipo !== ico[p].tipo) {
                lista.itensV[i].icone[p] = ico[p].padrao
              }
            }

            let txt = {
              conteudo: {
                tipo: 'string',
                padrao: 'Item teste'
              },
              fontFamily: {
                tipo: 'string',
                padrao: css.font.primary + ', ' + css.font.fallback
              },
              fontWeight: {
                tipo: 'string',
                padrao: 'normal'
              },
              fontStyle: {
                tipo: 'string',
                padrao: 'normal'
              },
              bgColor: {
                tipo: 'string',
                padrao: css.bgColor
              },
              color: {
                tipo: 'string',
                padrao: css.color.textSecondary
              },
              hoverColor: {
                tipo: 'string',
                padrao: css.color.secondary
              }
            }
            for (let p in txt) {
              let tipo = typeof lista.itensV[i].texto[p]
              if (!(p in lista.itensV[i].texto) || tipo !== txt[p].tipo) {
                lista.itensV[i].texto[p] = txt[p].padrao
              }
            }
            lista.itensV[i].texto.hover = false
          }
          return lista
        }
      }
    }
  }
</script>

<style scoped>
  .listaV{
    min-width: 240px;
    max-width: 290px;
  }
  .listaV>.itemV{
    list-style-type: none;
    list-style-position: outside;
    list-style-image: none;
  }
  .listaV>.itemV>a,
  .listaV>.itemV>a:active,
  .listaV>.itemV>a:visited{
    padding: 7px 10px 7px 27px;
    display: block;
    font-size: 13px;
    line-height: 1.25;
    max-height: 4em;
    overflow: hidden;
    text-align: left;
    white-space: -moz-pre-wrap!important;
    white-space: -pre-wrap!important;
    white-space: -o-pre-wrap!important;
    white-space: pre-wrap!important;
    word-wrap: break-word!important;
  }
  .listaV>.itemV:first-child a{
    padding: 16px 10px 7px 27px;
  }
  .listaV>.itemV:last-child a{
    padding: 7px 10px 16px 27px;
  }
  .listaV>.itemV>a>i{
    margin-top: -2px;
    margin-right: 5px;
    margin-left: -13px;
    height: 16px;
    line-height: 16px;
  }
  .listaV>.itemV>a>i::before{
    font-size: 8.5px;
  }
  .listaV>.itemV>a:hover{
    cursor: pointer;
  }
</style>

The object model that is received via prop is commented out at the beginning of the script.

    
asked by anonymous 24.08.2017 / 16:22

0 answers