Accessing nested objects in Vue

Question

I am only able to access currentView and subTask, but not subTasks2. Although I'm following the same approach. I want to access the array of objects branches and report in the response. Any hint, please?

[
    {
        "id": "sss",
        "name": "TestDemo",
        "visibility": "ss",
        "projects": [
            {
                "name": "ss",
                "branchs": [
                    {
                        "name": "master",
                        "state": "none",
                        "report": {
                            "branchName": "master",
                            "projectName": "ss",
                            "organizationName": "TestDemo",
                            "failedRuns": 0,
                            "totalRuns": 0,
                            "successRunsPercentage": 100
                        }
                    }
                ]
            }
        ]
    }
]

Template vuejs (First two binds are working fine). I still want to access branchs and report


  <div id="ID1">
  <ul>
    <li v-for="currentView in responseTest" :key="currentView.id" >
      {{ currentView.name }} - {{ currentView.visibility }}
      <ul>
        <li v-for="subTask in currentView.projects " :key="subTask.id" >
          {{ subTask.name }} - {{ subTask.branchs }}
        </li>
      </ul>
      <ul>
        <li v-for="subTask2 in subTask.branchs " :key="subTask2.id" >
          {{ subTask2.name }} - {{ subTask2.state }}
        </li>
      </ul>
    
    </li>
  </ul>
</div>

Wenfang Du · Accepted Answer · 2021-04-15 10:41:14Z

The issue you're facing is that subTask is undefined in your third v-for due to incorrect nesting.

You can only access your variables assigned from the v-for inside child components of that element.

The element your subTask2 in subTask.branchs loop needs to be a child of the element that has the subTask variable.

For example:

    <div id="ID1">
        <ul>
          <li v-for="currentView in responseTest" :key="currentView.id">
            {{ currentView.name }} - {{ currentView.visibility }}
            <ul>
              <li v-for="subTask in currentView.projects" :key="subTask.id">
                {{ subTask.name }} - {{ subTask.branchs }}
                <ul>
                  <li v-for="subTask2 in subTask.branchs" :key="subTask2.id">
                    {{ subTask2.name }} - {{ subTask2.state }}
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>

You may need to play about with the structure and formatting to make it look right but that example should be runnable.

Collectives™ on Stack Overflow

Accessing nested objects in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related