0
This code is a list of links that is used within a dropdown menu. I started getting this message after I decided to set a pattern of colors and fonts for my site and 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 template of the object that is received via prop is commented at the beginning of the script.
If possible put in the Topic description the difficulty you are having, in Portuguese, because it may increase the chance that you receive a response....
– JcSaint
The difficulty is this Warning that vuejs is returning me: "You may have an Infinite update loop in a Component render Function" that I have no idea why it’s happening.
– Ian Cléver Sales Fernandes