Home » vue » VueJS v-for loop breaks when referencing other ID

VueJS v-for loop breaks when referencing other ID

Posted by: admin November 26, 2021 Leave a comment

Questions:

Relatively new to Vue, I’m trying to build something bigger than small widgets and I’m running into a road block.

I’m trying to reference one object inside of a v-for loop of another object. Namely, a studyID inside of a Sessions Loop, so I can print the name of the study it’s associated with.

When I try to access the entire study object in the loop..it works!

 <div v-for="session in sessions">
        {{ studies[(session.studyId)] }} <br />
        {{ session.interviewee }}
      </div>

gets me rendered in html

{ "id": 0, "name": "Usability", "description": "General usability tests", "createdDate": "12-31-2017" } 
Carol Danvers 

whereas

<div v-for="session in sessions">
            {{ studies[(session.studyId)].name }}
            {{ session.interviewee }}
          </div>

gets me a console error, “TypeError: _vm.studies[session.studyId] is undefined”

When I hard-code it (ie. studies[0].name) it renders just fine which makes me think I’m missing some nuance to how VueJs is evaluating the expression.

Example of the data structure below.

studies: [
    {
      'id' : 0,
      'name' : "Usability",
      'description' : 'General usability tests',
      'createdDate' : '12-31-2017',
      'script' : [
        { 'id': 0, 'string' : "Question 1: What do you see when you do X, Y or Z?" },
        { 'id': 1, 'string' : "Question 2: Where would you expect it to be?"},
        { 'id': 2, 'string' : "Question 3: Is there anything important you'd want us to know after all of this?"}
        ]
    },
    {
      'id' : 1,
      'name' : "Contextual Inquiry",
      'createdDate' : '12-31-2017',
      'description' : 'On-site interviews with our users!',
      'script' : [
          { 'id': 0, 'string' : "Question 1: What do you see when you do X, Y or Z?" },
          { 'id': 1, 'string' : "Question 2: Where would you expect it to be?"},
          { 'id': 2, 'string' : "Question 3: Is there anything important you'd want us to know after all of this?"}
        ]
    }
  ],
  sessions: [
    {
      'interviewee': 'Carol Danvers',
      'timestamp' : '',
      'studyId' : 0,
      'Notes': [
        {
          'relativeTimestamp' : 43,
          'qID:': 0,
          'authorID': '0',
          'noteText': 'This is a note',
          'tags' : [1]
        },
        {
          'relativeTimestamp' : 17,
          'qID:': 2,
          'authorID': '1',
          'noteText': 'This is another note',
          'tags' : [1, 0, 2]
        },
        {
          'relativeTimestamp' : 1,
          'qID:': 2,
          'authorID': '0',
          'noteText': 'This is this working yet?',
          'tags' : [2,5]
        },
        {
          'relativeTimestamp' : 458,
          'qID:': 3,
          'authorID': '1',
          'noteText': 'Oh hey, this is working!',
          'tags' : [0,1]
        }
      ]
    },
    {
      'interviewee': 'Peter Parker',
      'timestamp' : '',
      'studyId' : 1,
      'Notes': [ ]
    },
    {
      'interviewee': 'Bruce Banner',
      'timestamp' : '',
      'studyId' : 0,
      'Notes': [ ]
    },
    {}
  ],
Answers:

Looking at your data – I see that you don’t have studyId field for the last item in sessions.
I believe it causes the problem and you should handle it somehow, for example:

{{ studies[(session.studyId || 0)] }} <br />

or

<div v-for="session in sessions">
    <template v-if="!!session.studyId">
        {{ studies[(session.studyId)] }} <br />
        {{ session.interviewee }}
    </template>
</div>

or create a computed property validSessions in you component, where you can filter out empty sessions and then use it in you template like this:

<div v-for="session in validSessions">
   ...
</div>