Vuejs在模板中显示多个值

Question

我有多个附件链接和附件名称。这是控制台显示的内容：

问题是只显示最后一个链接和名称：

我在模板中使用这个：

<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>

数据中的这个：

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

这在 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);
        });
    }
});

问题在于这两行：

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

我不知道如何解决这个问题，因为 console.log 显示 2 项，而模板只显示最后一项。我使用 for 循环进行了一些实验，但无法将所有附件链接和名称都放入模板中。

感谢任何帮助！

Answer 1

我看不到 attachments 在您的代码中定义的位置，但 self.attachmentUrl 和 self.attachmentName 被初始化为数组，但是您为它们分配了一个字符串。

您可以像 self.attachmentUrl.push(attachmentLink); 那样推送到数组，但是您会遇到循环两个数组以显示数据的问题（假设您想同时显示 url 和名称）。

我认为最好废弃你的两个数组，只保留一个具有url 和name 属性的数组。我在下面创建了一个小提琴，它使用v-for 循环遍历数组。

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>