Vuejs在模板中显示多个值

Question

I have multiple attachment links and attachment names. This is what the console shows:

The problem is that only the last link and name are shown:

I use this in the template:

<div class="d-inline col-lg-20 col-md-60 col-sm-40" padding="20px" >
    <th>Files</th>
    <tr>
        <div class="d-inline col-lg-20 col-md-60 col-sm-40" padding="20px">
        {{attachmentName}}
        {{attachmentUrl}}
        </div>
    </tr>
</div>

This in data:

data() {
            return {
                selectedFile: "",
                progress: 0,
                attachmentName: [],
                attachmentUrl: [],
            };
        },

and this in JavaScript:

$.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + itemId + "')/AttachmentFiles",
    method: "GET",
    async: false,
    headers: { "Accept": "application/json; odata=nometadata" },
    success: function (data) {
        $(data.value).each(function (i) {
            attachments.items.push({
                extension: this.FileName.substring(this.FileName.lastIndexOf('.') + 1),
                name: this.FileName,
                path: this.ServerRelativeUrl
            });
            attachmentLink = "site.sharepoint.com" + this.ServerRelativeUrl;
            attachmentName = this.FileName;

            self.attachmentUrl = attachmentLink;
            self.attachmentName = attachmentName;

            attachments.count++;
            console.log("attachments: " + attachmentLink);
            console.log("name: " + attachmentName);
        });
    }
});

The problem is these two lines:

self.attachmentUrl = attachmentLink;
self.attachmentName = attachmentName;

I don't know how to fix this issue because the console.log shows 2 items, while the template only shows the last one. I experimented a bit using for loops but can't get all the attachment links and names into the template.

Any help is appreciated!

Answer 1

I couldn't see where attachments is defined in your code but self.attachmentUrl and self.attachmentName are initialised as arrays but then your assigning them a string.

You could push to the array instead like self.attachmentUrl.push(attachmentLink); but then you have the problem of looping through two arrays to show your data (assuming you want to show the urls and names together).

I think it would be better to scrap your two arrays and just have one with properties url and name . I've created a fiddle below which does that using v-for to loop through the array.

 Vue.config.productionTip = false; Vue.config.devtools = false; new Vue({ el: "#app", data: () => { return { files: [] } }, methods: { downloadFiles() { let datas = [{ name: "Test", attachment: ".pdf" }, { name: "Hello World", attachment: ".png" }, { name: "SO", attachment: ".html" }] //Get data from api for (let i = 0; i < datas.length; i++) { this.files.push({ name: datas[i].name, attachment: datas[i].attachment }); //Work out what name and attachment are } } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button type="button" @click="downloadFiles">Download Files</button> <h5>Files</h5> <ul> <li v-for="file in files"> {{file.name}}{{file.attachment}} </li> </ul> </div>