Vuejs Show multiple values in template

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!

tony19 · Accepted Answer · 2022-07-16 03:03:51Z

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>

Collectives™ on Stack Overflow

Vuejs Show multiple values in template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related