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

Question

我试图在我的模板中显示“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)

    }
},

你能帮我解决这个问题吗

Answer 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"/>

¯\_(ツ)_/¯