[英][Vue warn]: Error in render: “TypeError: Cannot read property 'NomeStr' of undefined”
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"我试图在我的模板中显示“NameSrt”项数组值,但我遇到了问题: vue.runtime.esm.js?2b0e:619 [Vue 警告]:渲染错误:“TypeError:无法读取属性'NomeStr' 未定义"
NomeStr is inside to an object named: ImagemPrincipal. NomeStr 位于名为 ImagemPrincipal 的 object 内部。 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你能帮我解决这个问题吗
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
鉴于您使用的是
v-for="produto of produtos"
我认为您使用的是produtos.ImagemPrincipal.NomeStr
而不是produto.ImagemPrincipal.NomeStr
To be clear, the error states that produtos.ImagemPrincipal
is undefined需要明确的是,错误表明
produtos.ImagemPrincipal
未定义
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>
为了排除故障,我通常会做类似...
<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.这将显示产品
produto
内容,然后您可以检查出了什么问题。
another guess, maybe you want另一个猜测,也许你想要
<img class="miniatura" name="imagem" src="NomeStr"/>
¯\_(ツ)_/¯ ¯\_(ツ)_/¯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.