[Vue warn]: Error in render: “TypeError: Cannot read property 'NomeStr' of undefined”

Question

I'm trying to show 'NameSrt' item array value in my template, but I'm getting the issue: vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'NomeStr' of undefined"

NomeStr is inside to an object named: ImagemPrincipal. Here is 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)

    }
},

Could you please help me to fix this issue

The error indicates that whatever object the property NomeStr is on is not defined. Leads me to believe that Produto might not be defined, or isn't defined correctly. — darkmnemic
produto is defined : data () { return { info: '', produtos: [], produto: '', NomeStr: '', IdImagem: '', image: '' } — Isabela Carvalho

Daniel Daniel · Accepted Answer · 2020-05-29T18:10:44

I think the problem is here...

<tr v-for="produto of produtos" :key="produto.IdProduto">
  ...
  <img class="miniatura" name="imagem" :src="produtos.ImagemPrincipal.NomeStr"/>
  ...
</tr>

Given that you're using v-for="produto of produtos" I think you are using produtos.ImagemPrincipal.NomeStr instead of produto.ImagemPrincipal.NomeStr

To be clear, the error states that produtos.ImagemPrincipal is undefined

It's hard to tell the exact cause/fix without seeing the data. Most likely it is due to the structure not matching.

To troubleshoot I would usually do something like...<pre>{{JSON.stringify(mytroublevar,null,2)}}</pre>

<tr v-for="produto of produtos" :key="produto.IdProduto">
    <td> 
    <div v-if="(produto.lenght > 0)">
        <pre>{{JSON.stringify(produto,null,2)}}</pre>
        <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>

this will show the produto object content, and then you can examine what went wrong.

another guess, maybe you want

<img class="miniatura" name="imagem" src="NomeStr"/>

¯\_(ツ)_/¯

[Vue warn]: Error in render: “TypeError: Cannot read property 'NomeStr' of undefined”

1 Answers