How to dynamically change data shown on the v-list in vuejs?

Question

I want to dynamically display data on list depending upon the key I select. The list of items can have multiple keys. I want to dynamically choose the data that I want to display onto the list without hard coding the actual key.

<template>
  <v-card
    class="mx-auto"
    max-width="500"
  >
    <v-list>
      <v-list-item-group v-model="model">
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
        >
          <v-list-item-icon>
            <v-icon v-text="item.icon"></v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title v-text="item.data_to_display"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>
<script>
  export default {
    data: () => ({
      data_to_display: 'name',   // or data_to_display: 'text'
      items: [
        {
          age: 34,
          name: 'abc',
          marks: null
        },
        {
          age: 12, 
          name: '',
          marks: 60
        },
        {
          age: '20,
          name: 'lmn',
          marks: 70
        },
      ],
      model: 1,
    }),
  }
</script>

The above list of items has multiple keys. I want to display any one of them name, age or marks depending upon the key I choose from the script

You have the item, just take whatever you want from it. item[key] — Sami Kuhmonen
– Sami Kuhmonen, Commented Mar 13, 2022 at 6:46
Thanks it worked... But it is also displaying some blank values i.e. spaces if one of the objects has an empty values. — Mrunall Veer
– Mrunall Veer, Commented Mar 13, 2022 at 6:56
For that you’ll need to make a computed list which filters values out — Sami Kuhmonen
– Sami Kuhmonen, Commented Mar 13, 2022 at 6:57

Nikola Pavicevic · Accepted Answer · 2022-03-13 07:29:18Z

2

Like @Sami commented you can use key to show data, and in computed property filter only ones with values:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      data_to_display: 'name',  
      items: [{age: 34, name: 'abc', marks: null}, {age: 12, name: '', marks: 60}, {age: 20, name: 'lmn', marks: 70 },],
      model: 1,
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(i => i[this.data_to_display]  )
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-card
          class="mx-auto"
          max-width="500"
        >
          <v-list>
            <v-list-item-group v-model="model">
              <v-list-item
                v-for="(item, i) in filteredItems"
                :key="i"
              >
                <v-list-item-icon>
                  <v-icon v-text="item.icon"></v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title v-text="item[data_to_display]"></v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

answered Mar 13, 2022 at 7:29

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

4 Comments

Mrunall Veer Over a year ago

Do you think this is a feasible solution as there are 1000s of objects within items array? I tried adding a v-if statement inside <v-list-item-content v-if="item !== null"> but this also didn't work

Nikola Pavicevic Over a year ago

@Mrunall Veer hey mate, why not you only filter for items with values, as you can se it works in example?

Mrunall Veer Over a year ago

Because I will have to iterate the loop 1000 times each time I switch the key. Can I add a v-if statement instead?

Nikola Pavicevic Over a year ago

I think when you change the key you are already iterating in v-for in template, so it's the same because you are now connected at filteredItems in template

Rohìt Jíndal · Accepted Answer · 2022-03-13 07:45:06Z

Convert v-text="item.data_to_display" to v-text="item[data_to_display]" will resolve the issue.

You need to use brackets if the property name has special characters. Bracket notation can be quite useful if you want to search for a property's values dynamically.

As in one of the object you have empty value for name property, It is showing as blank.

Working Demo :

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    data_to_display: 'name',
    model: 1,
    items: [{
      age: 34,
      name: 'abc',
      marks: null
    }, {
      age: 12, 
      name: '',
      marks: 60
    }, {
      age: '20',
      name: 'lmn',
      marks: 70
    }]
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-card
                class="mx-auto"
                max-width="500"
                >
          <v-list>
            <v-list-item-group v-model="model">
              <v-list-item
                           v-for="(item, i) in items"
                           :key="i"
                           >
                <v-list-item-icon>
                  <v-icon v-text="item.icon"></v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title v-text="item[data_to_display]"></v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</div>

Collectives™ on Stack Overflow

How to dynamically change data shown on the v-list in vuejs?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related