Dynamically display certain column data from query object using vuetify

Question

I have a query Object that returns 357 columns (e.g, fullRecord). For a certain portion of my UI, I want to query through a subset of about 125 of those items and display them in a list. I have the column names of those items I want to display in an array (e.g., colsWanted).

I am trying to figure out how to dynamically iterate through the "colsWanted" array and display the appropriate "fullRecord.colsWanted(Item)" in the vuetify interface. I've tried what feels like a million different iterations of this but here is the latest which shows an error:

    <v-flex v-for="(value, index) in colsWanted" :key="value">
      <v-card flat>
        <span v-if="fullRecord[value] in fullRecord">
          <strong>{{ index }}. {{ fullRecord[value] }}</strong>
        </span>
        <span v-else class="error--text">Not Available</span>
      </v-card>
    </v-flex>

I actually get no errors at all from this; but no results are displayed when they should in fact return results.

Thanks in advance for any assistance.

@Flame Just a comment about the edit. My linter preferences push stacked, nested formatting of the attributes. Not sure if others have settings the same way but thought I'd share. — akaHeimdall
– akaHeimdall, Commented Aug 10, 2019 at 13:35
well this is easier to read I reckon. Situation differs with more attributes ofcourse — Flame
– Flame, Commented Aug 10, 2019 at 14:34

Flame · Accepted Answer · 2019-08-07 11:48:56Z

1

Your object key selection is wrong:

<span v-if="fullRecord[value] in fullRecord">

fullRecord[value] will retrieve the value of the value key, which will not be in fullRecord.

What you should be using is:

<span v-if="value in fullRecord">

or

<span v-if="fullRecord.hasOwnProperty(value)">

Also I would rename value to key since thats what it actually is.

answered Aug 7, 2019 at 11:48

Flame

7,7563 gold badges43 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

akaHeimdall Over a year ago

Thanks much for the feedback. I actually decided to go a completely separate route but I'll hold onto the details for the future.

Collectives™ on Stack Overflow

Dynamically display certain column data from query object using vuetify

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related