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.