I'm having trouble displaying the 'NameSrt' item array value in my template, and I keep encountering this issue: vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'NomeStr' of undefined"
The NomeStr is located inside an object named ImagemPrincipal. Here's my code:
<table>
<thead class="categories">
<th><img src="../assets/bottle.svg"><p>Bebidas</p></th>
<th><img src="../assets/pineapple.svg"><p>Frutas</p></th>
<th><img src="../assets/cleaning.svg"><p>Limpeza</p></th>
<th><img src="../assets/fridge.svg"><p>Congelados</p></th>
</thead>
<tr v-for="produto of produtos" :key="produto.IdProduto">
<td>
<div v-if="(produto.lenght > 0)">
<img class="miniatura" name="imagem" :src="produtos.ImagemPrincipal.NomeStr"/>
</div>
<div class="text-box">
<p class="title">{{produto.Estoques.Produto.NomeStr}}</p>
<p class="price">R${{produto.PrecoDoub}}</p>
<p class="promotional">R$ 12,50</p>
</div>
<div class="icons-box">
<div class="btn-favorite"></div>
<div class="btn-add"><div class="qtd"><p>2</p></div></div>
</div>
</td>
</tr>
</table>
import axios from 'axios';
export default {
components: {
Cart
},
data () {
return {
info: '',
produtos: [],
produto: '',
NomeStr: '',
IdImagem: '',
image: ''
}
},
async mounted () {
const usuario = { UsuarioStr: "admin", SenhaStr: "abc123" };
const url = "https://localhost:3001/api/";
const responseLogin = await axios.post(url + 'usuarioapimobile/login', usuario);
if(responseLogin) {
const { data } = responseLogin.data;
const sendData = {
IdEntrega: 0,
IdTipoProduto: 0,
IdVitrine: null,
ListaIdCategoria: [],
ListaIdEncarte: [],
ImagemPrincipal: [],
NomeProdutoPesquisaStr: '',
IdPromocao:'',
IdProduto: 0,
NomeStr: '',
IdImagem: 0,
OrdemSecao: 0
};
const responseData = await axios.post(url + "PromocoesGeraisMobile?idLoja=10719&pagina=0&quantidadePorPagina=150",
sendData, {
headers: {'Authorization': `Bearer ${data.TokenStr}`
}})
.then(response => {
this.produtos =(response.data.data.promocoesGerais)
return { response }
})
.catch((err) => {
console.error(err)
})
console.log(this.produtos)
console.log('INFO', responseData)
}
},
Can someone assist me with resolving this problem?