javascript - 如何动态更改vuejs中v-list上显示的数据？

Question

我想根据我选择的键动态显示列表上的数据。项目列表可以有多个键。我想动态选择要显示到列表上的数据，而不需要对实际键进行硬编码。

<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>

上面的项目列表有多个键。我想根据我从脚本中选择的键来显示其中任何一个姓名、年龄或标记

Answer 1

就像@Sami评论的那样，您可以使用键来显示数据，并且在计算属性中仅过滤具有值的数据:

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bed8d1d0cafe8890c6" rel="noreferrer noopener nofollow">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15636070617c736c55273b6d" rel="noreferrer noopener nofollow">[email protected]</a>/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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b5d5e4e6b190553" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ff9faeafbe6e9f6cfbda1f7" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vuetify.js"></script>