JavaScript this.todoList.filter не является функцией

Question

Я хочу создать список задач в Vue. js, но элементы не отображаются. (Когда я использую localStorage для хранения элементов, он работает, но когда я использую список в SharePoint, он не работает)

Проблема заключается в большинстве вероятно, эта часть (так как я адаптировал код):

computed: {
            pending: function () {
              console.log("pending");
              if (!this.todoList) {
                return [];
              }
              return this.todoList.filter((item) => !item.done);
            }

Я получаю элементы списка ToDo, используя getToDos метод:

 methods: {
            getTodos() {
              let siteUrl = 'https://thesite.sharepoint.com/sites/Playercard/';
              var clientContext = new SP.ClientContext(siteUrl);
              var oList = clientContext.get_web().get_lists().getByTitle('PhysicalGoals');
              var camlQuery = new SP.CamlQuery();
              var playerID = this.$store.state.selectedPlayer.ID;
              console.log("playerID getTodos: " + playerID);
              camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'playerID\'/>' +
                      '<Value Type=\'Text\'>'+playerID+'</Value></Eq></Where></Query></View>');

              collListItem = oList.getItems(camlQuery);
              clientContext.load(collListItem);

              clientContext.executeQueryAsync(
                      Function.createDelegate(this, this.onQuerySucceededNew),
                      Function.createDelegate(this, this.onQueryFailedNew)
              );
            },
            onQuerySucceededNew(){
              console.log("onQuerySucceededNew!");
              var listItemEnumerator = collListItem.getEnumerator();

              while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
                this.todoList = oListItem.get_item('Title');
                console.log("this.todoList: " + this.todoList);
              }
              console.log("this.todoList: " + this.todoList);
              console.log("this.todoList.toString(): " + this.todoList.toString());
              console.log("this.todoList.length): " + this.todoList.length);

            }

Я думаю, что проблема в item , но я не знаю, как я должен адаптировать код. Это отдельный файловый компонент с HTML, CSS и JS. Вот полный компонент .

Кто-нибудь знает, как можно решить эту проблему?

Answer 1

Проблема в функции onQuerySucceededNew(). Вы должны поместить в массив sh элементов.

Пример решения:

onQuerySucceededNew(){
    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        this.todoList.push(oListItem.get_item('Title'));
    }
}

РЕДАКТИРОВАТЬ

И обязательно определить this.todoList как массив в компоненте.

data() {
    return {
        todoList: [],
    }
},

Answer 2

Проблема

• Ошибка указывает, что todoList существует, но не является массивом, поэтому не имеет метода filter. Если бы todoList вообще не существовало, вычисленное возвратило бы [] без ошибки.

• Когда вы устанавливаете todoList, вы делаете это в al oop, где он перезаписывается несколько раз.

Fix

Попробуйте изменить onQuerySucceededNew на:

onQuerySucceededNew(){
  console.log("onQuerySucceededNew!");
  var listItemEnumerator = collListItem.getEnumerator();

  const todoList = [];  // New array to hold items

  while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    todoList.push(oListItem.get_item('Title'));  // add item instead of ovewriting
    console.log("this.todoList: " + this.todoList);
  }

  this.todoList = todoList;  // set the component data property

  console.log("this.todoList: " + this.todoList);
  console.log("this.todoList.toString(): " + this.todoList.toString());
  console.log("this.todoList.length): " + this.todoList.length);
}

Answer 3

Пожалуйста, попробуйте условие, подобное этому

pending: function () {
   console.log("completed");
   if (this.todoList && this.todoList.length>0) {
     return this.todoList.filter(item => !item.done);
   }
   return [];
}

Примечание: убедитесь, что данные в this.todoList назначены правильно и в формате array.