[Vue предупреждение]: Ошибка при рендеринге: «TypeError: невозможно прочитать свойство 'NomeStr' of undefined»

Question

Я пытаюсь показать значение массива элементов NameSrt в своем шаблоне, но получаю сообщение об ошибке: vue .runtime.esm. js? 2b0e: 619 [Vue warn ]: Ошибка при рендеринге: «TypeError: Невозможно прочитать свойство 'NomeStr' of undefined»

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 не определено

Трудно сказать точную причину / исправление, не просматривая данные. Скорее всего, это связано с несоответствием структуры.

Для устранения неполадок я обычно делал что-то вроде ... {{JSON.stringify(mytroublevar,null,2)}}

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

{{produto.Estoques.Produto.NomeStr}} Р $ {{produto.PrecoDoub}} 12,50 реалов

2

это покажет содержимое объекта produto, а затем вы сможете проверить, что пошло не так.

другое предположение, может быть, вы хотите

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

¯ \ _ (ツ) _ / ¯