javascriptvue.jsvuejs2vuetify.jsdynamic-list

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


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


Solution

  • 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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>