JavaScript this.todoList.filter 不是函数

我想在 Vue.js 中创建一个待办事项列表，但项目没有显示。 (当我使用 localStorage 来存储它可以工作的项目时，但是当我在 SharePoint 上使用列表时它却没有)

问题很可能是这部分(因为我修改了代码):

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

我使用 getToDos 方法获取 ToDo 列表项:

 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 的单文件组件。
这是 full component 。

有人知道如何解决这个问题吗？

最佳答案

问题

错误表明 todoList 存在但不是数组，因此没有 filter 方法。如果 todoList 根本不存在，则计算将返回 [] 而没有错误。

当你设置 todoList 时，你会在一个循环中这样做，它会被多次覆盖。

修复

尝试将 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);
}

关于JavaScript this.todoList.filter 不是函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61027624/

ToDoList

JavaScript this.todoList.filter 不是函数