Vue Axios：如何在 ArrayList 中获取链接答案

【问题标题】：Vue Axios: How I get the Link inside a ArrayListVue Axios：如何在 ArrayList 中获取链接
【发布时间】：2020-09-14 18:52:40
【问题描述】：

我需要获取图片的 URL 以显示我的 img :src 标签。我试过了：

<img class="card-img-top" :src="noticia.Fotos.Link" alt="Card image cap">

这是我的 HTML：

<div class="col-lg-4" v-for="noticia in noticias">
                            <div class="row">
                                <div class="card mt-3 col-lg-10 offset-lg-1">
                                    <img class="card-img-top" :src="noticia.Fotos.Link" alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">{{noticia.Titulo}}</h5>
                                        <p class="card-text text-center">
                                            {{noticia.Descricao}}
                                        </p>

                                    </div>
                                </div>
                            </div>
                        </div>

这是我的脚本：

<script>
        new Vue({
            el: '#noticia',
            data: {
                UnidadeId: "",
                Identificador: "",
                Tipo: "",
            },
            data() {
                return {
                    noticias: [],
                }
            },
            mounted() {
                var self = this
                axios.get('URL', {
                    params: this.axiosParams
                })
                    .then(response => {
                        console.log(response);
                        self.noticias = response.data
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            computed: {
                axiosParams() {
                    const params = new URLSearchParams();
                    params.append('UnidadeId', '31');
                    params.append('Identificador', '0');
                    params.append('Tipo', '1');
                    return params;
                }
            },
        })
    </script>

回应：

[
    {
        "ItemId": 902,
        "Titulo": "Noticia",
        "Descricao": "Noticia",
        "Data": "/Date(1590593442191)/",
        "QtdeCurtidas": 0,
        "QtdeComentarios": 0,
        "Curtido": false,
        "Observacao": null,
        "Fotos": [
            {
                "FotoId": 1508,
                "Link": "http://agro.aloapp.com.br/Imagens/cVV4S0dINGRESm9IN3IxM2swYXVjZz09/Item/bg_carousel_2.jpg"
            }
        ],
        "Videos": [],
        "IsVideo": false
    }
]

【问题讨论】：

标签： javascript html vue.js axios

【解决方案1】：

您正在尝试从数组（不是 ArrayList）中检索元素，这意味着您需要指定数组中所需的元素。在 Javascript 中，这通过在数组名称后的括号中指定元素的索引来工作。如果你想要第一个元素，你可以noticia.Fotos[0].Link。

【讨论】：

如果我尝试：:src="noticia.Fotos[1].Link"，我的控制台会返回：“TypeError：无法读取未定义的属性 'Link'”。为什么？
在计算机科学中，大多数时候数组从 0 而不是 1 开始。在您的列表中，位置 0 有一张照片但不是位置 1，这就是您收到此错误的原因