VueJ: 렌더링 요소가 아닌 'v-for'

VueJ: 렌더링 요소가 아닌 'v-for'

간단한 버전으로 관련 코드를 공유하고 싶은데 공유할 수 없습니다.저는 Vue에서 만든 ToDo 앱을 조금 오버하고 있습니다.여기 레포 링크가 있습니다.https://github.com/jaiko86/subtasks

ToDo 항목은 스토어에서 관리됩니다.

export default {
  state: {
    workspaceIds: [], // IDs of workspaces
    tasksById: {}, // <--- this is the tasks I have
    detachedTask: null,
    focusedTaskId: null,
    currentWorkspaceId: null,
  },
  ...
}

에는 App.vue가 .v-for다음 작업을 수행합니다.

  computed: {
    taskIds() {
      const { currentWorkspaceId, tasksById } = this.$store.state;
      if (this.showOnlyLeafSubTasks) {
        return Object.values(tasksById)
          .filter(task => !task.subTaskIds.length)
          .map(task => task.id);
      } else if (currentWorkspaceId) {
        return tasksById[currentWorkspaceId].subTaskIds;
      }
    },
  },

기본적으로 계산된 속성은 현재 작업 영역과 같은 특정 조건과 관련된 작업 목록만 반환합니다.마다 고유디버깅을 마다 ID task-#작업 입력에는 작업 ID가 자리 표시자로 지정됩니다.

여기에 있는 .App.vue:

<template>
  <div id="app">
    <!-- This is the top part -->
    <WorkspaceNav /> 

    <!-- this is the for-loop in question -->
    <TaskWrapper v-for="id in taskIds" :key="id" :id="id" :depth="0" />

    <!-- this is the filter that's on the right side -->
    <TaskFilters />
  </div>
</template>

문제는 계산된 속성이 반환하는 항목을 렌더링하지 않는다는 것입니다.

vue devtool과 콘솔, 뷰에 차이가 있는 이유를 이해하는 데 비참하게 실패하고 있습니다.

렌더링된 보기는 다음과 같습니다.

vue dev 툴의 내용은 다음과 같습니다.

됩니다.<App>할 수 하기 위해 컴포넌트는 개발 도구의 컴포넌트이며, 이를 할 수 .$vm0.taskIds:

["task-1", "task-2"]

작업을 계층적으로 인쇄하는 커스텀 기능은 다음과 같습니다.

> printTree()
task-0
  task-1

  task-2

현재 코드의 관련 섹션에 대한 DOM은 다음과 같습니다.

    <div id="app">
      <div class="workspace-nav">
        ...
      </div>
      <div data-v-76850a4a="" data-v-7ba5bd90="" class="leaf">
        <div data-v-76850a4a="" class="main-task depth-0">
          <!---->
          <div class="progress-indicator">
            <div class="checkmark gray-checkmark"></div>
          </div>
          <input placeholder="task-1" />
        </div>
        <div class="sub-tasks"></div>
      </div>
      <div class="filters">
        ...
      </div>
    </div>

따라서 어느 위치에서 봐도 taskIds는 두 가지 항목의 목록을 반환하지만 첫 번째 항목만 렌더링합니다.

여기 한가지 가능한 설명이 있습니다...

계산된 속성이 배열을 반환하는 시점에서 배열에는 항목이 하나만 포함됩니다.예를 들어 여러 가지 방법으로 확인할 수 있습니다.템플릿에 다음 항목을 넣어 보십시오.

{{ taskIds }}

그 후 어레이는 2개의 항목을 포함하도록 변경될 수 있지만 변경으로 인해 반응성 시스템이 트리거되지 않으면 재렌더링은 발생하지 않습니다.

것 같다.tasksIdstasksById[currentWorkspaceId].subTaskIds두 가지 가능성이 있습니다. 중 하나subTasksIds반응성이 없거나 반응성을 트리거하지 않는 방식으로 수정됩니다(예: 지수에 의한 직접 수정).

당신의 가게 코드를 보면 후자의 명확한 예가 보이지 않습니다.단, 이 행은createTask이상하게도 전자와 비슷한 것 같습니다.

state.tasksById[task.id] = task;

추가 중입니다.task(대부분) 새 키 아래의 기존 객체로 이동합니다.이는 반응성 경고 중 하나이며 새 속성을 개체에 직접 추가할 수 없습니다.

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

그 대신에,Vue.set:

Vue.set(state.tasksById, task.id, task);

진행 상황을 더 잘 이해하기 위해 다음 로그를 끝에 추가하십시오.createTask:

console.log(state.tasksById);

콘솔에서 개체/어레이를 자세히 살펴보면 Vue 반응성 시스템의 증거를 볼 수 있습니다.에 대한 참조가 표시될 수 있습니다.Observer. 속성에는 getters와 setters가 있으며 속성 값을 보려면 클릭해야 합니다.그러나 이 문제는 개체/배열이 반응하는 경우에만 발생합니다.없이 직접 추가하는 태스크Vue.set는 콘솔에 일반 객체 또는 콘솔로 표시됩니다.이러한 문제를 쉽게 디버깅할 수 있도록 하기 위해 어떤 차이가 있는지 알아보는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/57465536/vuejs-v-for-not-rendering-elements