javascript - Vuetify 项目组如何预选项目?
问题描述
我正在尝试从 vuetify 中预选项目item-group
。它适用于字符串,但不适用于对象。在 vuetify 文档中,他们使用字符串数组作为项目组的项目列表。它工作正常。
如果我尝试使用对象数组作为项目列表它不起作用
<div id="app">
<v-app id="inspire">
<v-card class="mx-auto" max-width="500">
<v-list shaped>
<v-list-item-group v-model="model" multiple>
<template v-for="(item, i) in items">
<v-divider
v-if="!item"
:key="`divider-${i}`"
></v-divider>
<v-list-item
v-else
:key="`item-${i}`"
:value="item"
active-class="deep-purple--text text--accent-4"
>
<template v-slot:default="{ active, toggle }">
<v-list-item-content>
<v-list-item-title v-text="item.name"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-checkbox
:input-value="active"
:true-value="item"
color="deep-purple accent-4"
@click="toggle"
></v-checkbox>
</v-list-item-action>
</template>
</v-list-item>
</template>
</v-list-item-group>
</v-list>
</v-card>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [
{ name: "Connect"}
],
model: [{name: "Connect"}]
}),
})
解决方案
您可以使用数据中的唯一值来实现,它可以是 aid
或其他东西。您需要在模型中以 的形式传递您的唯一值Array
,然后应该使用您的<v-list-item>
.
请检查代码片段和工作codepen演示。
代码片段
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [],
model: [1, 3, 6]
}),
methods: {
getValue(item) {
return `${item.id}. - ${item.title.toLocaleUpperCase()}`;
}
},
created: function() {
let self = this;
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(json => self.$data.items = json)
}
});
<div id="app">
<v-app id="inspire">
<v-card class="mx-auto" max-width="100%">
<v-list shaped>
<v-toolbar color="indigo" dark>
<v-toolbar-title>List posts :- jsonplaceholder</v-toolbar-title>
</v-toolbar> <br/>
<v-list-item-group v-model="model" multiple>
<template v-for="(item, i) in items">
<v-divider
v-if="!item"
:key="`divider-${i}`"
></v-divider>
<v-list-item
v-else
:key="`item-${i}`"
:value="item.id"
active-class="deep-purple--text text--accent-4"
>
<template v-slot:default="{ active, toggle }" >
<v-list-item-content>
<v-list-item-title v-text="getValue(item)"></v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-checkbox
:input-value="active"
:true-value="item.id"
color="deep-purple accent-4"
@click="toggle"
></v-checkbox>
</v-list-item-action>
</template>
</v-list-item>
</template>
</v-list-item-group>
</v-list>
</v-card>
</v-app>
</div>
推荐阅读
- php - 无法使用散列密码登录 - Mysqli PHP
- c++ - 如何从 C++ 中的 sha256 编码字符串创建 base64url
- sql - SQL 子查询过滤器导致返回 NULL 值?
- c# - 对 CosmosDB 的复合 Mongo 过滤器
- java - HTTP 请求正文中的数据如何传递到 servlet
- python - 在 shaow 文件 Linux 中打印加盐哈希
- python - 如何让我的 Python 密码破解器更高效地运行?
- python - ValueError:类的数量必须大于一;获得 1 门 ScikitLearn Python 课程
- javascript - 单击时如何获取div中特定元素的值?
- npm - 如何代理 Fontawesome Pro npm 包