[Vue 警告]：渲染錯誤：“TypeError：無法讀取未定義的屬性 'NomeStr'”

Question

我試圖在我的模板中顯示“NameSrt”項數組值，但我遇到了問題： vue.runtime.esm.js?2b0e:619 [Vue 警告]：渲染錯誤：“TypeError：無法讀取屬性'NomeStr' 未定義"

NomeStr 位於名為 ImagemPrincipal 的 object 內部。 這是我的代碼：

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

¯\_(ツ)_/¯