![](/img/trans.png)
[英][Vue warn]: Error in render: “TypeError: Cannot read property 'text' of undefined”
[英][Vue warn]: Error in render: “TypeError: Cannot read property 'NomeStr' of undefined”
我试图在我的模板中显示“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)
}
},
你能帮我解决这个问题吗
我觉得问题出在这里...
<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"/>
¯\_(ツ)_/¯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.