JavaScript this.toDoList.필터는 함수가 아닙니다.

JavaScript this.toDoList.필터는 함수가 아닙니다.

Vue.js에서 ToDo 목록을 만들고 싶은데 항목이 표시되지 않습니다.(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를 사용하는 단일 파일 구성 요소입니다.여기 전체 부품이 있습니다.

이 문제를 해결할 수 있는 방법을 아는 사람이 있나요?

이 문제는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: [],
    }
},

문제

• 이 에러는, 을 나타내고 있습니다.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);
}

이런 상태를 시험해 보세요.

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

주의: 데이터가 다음 위치에 있는지 확인합니다.this.todoList올바르게 할당되어 있다array포맷합니다.

언급URL : https://stackoverflow.com/questions/61027624/javascript-this-todolist-filter-is-not-a-function