JavaScript this.todoList.filter 不是函数

Posted 2023-02-22

【中文标题】JavaScript this.todoList.filter 不是函数

【英文标题】：JavaScript this.todoList.filter is not a function

【发布时间】：2020-07-16 13:14:50

【问题描述】：

我想在 Vue.js 中创建一个 ToDo 列表，但项目没有显示出来。 （当我使用 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。

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

【问题讨论】：

我确定问题不在pending 计算属性中。问题是 this.todoList 不是数组。

在控制台日志中可以看到，是一个字符串。

【参考方案1】：

请试试这样的条件

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

注意：确保this.todoList中的数据正确分配，并且是array格式。

【参考方案2】：

问题

错误表示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);

【讨论】：

感谢您的回复，非常感谢。它现在确实告诉我有 3 个项目（这是正确的），但它没有列出它们：imgur.com/a/ZTPykx0你知道这是什么原因吗？

不客气，感谢您的反馈。要了解为什么它们没有显示在模板中，我们需要查看模板代码。随意编辑您的帖子以包含它。或者您可以将其复制到模板中：<div v-for="(item, index) in todoList" :key="index"> item </div>

【参考方案3】：

问题出在onQuerySucceededNew() 函数中。您必须将项目推入数组。

示例解决方案：

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: [],
    
,