如何动态更改vuejs中v-list上显示的数据?
How to dynamically change data shown on the v-list in vuejs?
我想根据我 select 的键在列表中动态显示数据。项目列表可以有多个键。我想动态选择要显示到列表中的数据,而无需对实际键进行硬编码。
<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>
上面的项目列表有多个键。我想根据我从脚本中选择的键显示其中任何一个的名字、年龄或标记
就像@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/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>
将 v-text="item.data_to_display"
转换为 v-text="item[data_to_display]"
将解决问题。
如果 属性 名称有特殊字符,您需要使用 brackets
。如果您想动态搜索 属性 的值,括号表示法会非常有用。
因为在其中一个对象中 name
属性 的值为空,它显示为空白。
工作演示:
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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<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 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>
我想根据我 select 的键在列表中动态显示数据。项目列表可以有多个键。我想动态选择要显示到列表中的数据,而无需对实际键进行硬编码。
<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>
上面的项目列表有多个键。我想根据我从脚本中选择的键显示其中任何一个的名字、年龄或标记
就像@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/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>
将 v-text="item.data_to_display"
转换为 v-text="item[data_to_display]"
将解决问题。
如果 属性 名称有特殊字符,您需要使用 brackets
。如果您想动态搜索 属性 的值,括号表示法会非常有用。
因为在其中一个对象中 name
属性 的值为空,它显示为空白。
工作演示:
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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<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 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>