Vuejs Показать несколько значений в шаблоне - PullRequest
Новая
       123

Vuejs Показать несколько значений в шаблоне

1 голос
/ 08 мая 2020

У меня есть несколько ссылок и имен вложений. Вот что показывает консоль:

enter image description here

Проблема в том, что отображается только последняя ссылка и имя:

enter image description here

Я использую это в шаблоне: 

<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, но не смог добавить в шаблон все ссылки и имена вложений.

Любая помощь приветствуется!

1 Ответ

1 голос
/ 08 мая 2020

Я не мог видеть, где attachments определено в вашем коде, но self.attachmentUrl и self.attachmentName инициализируются как массивы, но затем вы назначаете им строку.

Вы можете pu sh to массив вместо self.attachmentUrl.push(attachmentLink);, но тогда у вас есть проблема перебора двух массивов для отображения ваших данных (при условии, что вы хотите показать URL-адреса и имена вместе).

Я думаю, что было бы лучше отказаться от два массива и только один со свойствами url и name. Я создал скрипт ниже, который делает это, используя v-for to l oop через массив. 

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