[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'NomeStr'”

Posted 2023-02-22

【中文标题】[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 \'NomeStr\'”

【英文标题】：[Vue warn]: Error in render: "TypeError: Cannot read property 'NomeStr' of undefined"[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'NomeStr'”

【发布时间】：2020-09-17 09:02:23

【问题描述】：

我试图在我的模板中显示“NameSrt”项数组值，但我遇到了问题： vue.runtime.esm.js?2b0e:619 [Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性 'NomeStr'”

NomeStr 位于名为 ImagemPrincipal 的对象内部。 这是我的代码：

<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)

    
,

你能帮我解决这个问题吗

【问题讨论】：

该错误表明属性NomeStr所在的任何对象都没有定义。让我相信Produto 可能没有定义，或者没有正确定义。

产品已定义：data () return info: '', produtos: [], produto: '', NomeStr: '', IdImagem: '', image: '' 跨度>

【参考方案1】：

我认为问题出在这里...

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

鉴于您使用的是v-for="produto of produtos"，我认为您使用的是produtos.ImagemPrincipal.NomeStr 而不是produto.ImagemPrincipal.NomeStr

需要明确的是，错误指出 produtos.ImagemPrincipal 未定义

如果不查看数据，很难说出确切的原因/解决方法。很可能是由于结构不匹配。

为了解决问题，我通常会做类似...<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>

这将显示produto 对象的内容，然后您可以检查出了什么问题。

另一个猜测，也许你想要

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

¯\_(ツ)_/¯

【讨论】：

我已经改成produto.ImagemPrincipal.NomeStr，还是不行