我正在使用V-Treeview进行嵌套选择。在初始加载期间，如何选择一些项目？我们如何访问树视图中项目的复选框属性？选择后，V-Model数组给出了所选项目的aray，我尝试在加载过程中更新此数组，但不起作用。
请参见下面的代码，保存单击，Tree1数组使用选定的项目ID进行更新。我已经尝试过，在此数组中添加一些ID以进行模拟选定的项目，但有所帮助。
<script>
export default {
data: () => ({
isLoading: false,
accounts: [],
isLoading1: false,
tree1: ['174'],
mspName: '',
selectedList: [{id: '174', selected: true},{id: '191', selected: true}]
}),
computed: {
items2() {
*/
console.log('computed: items 2 called');
var children = this.accounts.filter(function(cur){
if(cur.parent =='0') {
return [{id: cur.id,name: cur.msp_name}];
}
});
console.log(children);
console.log('length of children: '+children.length)
const having_parent = this.accounts.filter(function(cur){
if(cur.parent !=='0') {
var parent_index = children.findIndex(element => element.id ===cur.parent);
console.log('found parent: '+parent_index);
if(children[parent_index]['children'] == undefined) {
children[parent_index]['children']=[];
}
children[parent_index]['children'].push(cur);
}
});
return([{id: 1,name: this.mspName, children}]);
},
selections1() {
const selections1 = [];
for (const leaf of this.tree1) {
const account = this.accounts.find(account => account.id === leaf);
if (!account) continue;
selections1.push(account);
}
return selections1;
},
shouldShowTree1() {
return this.accounts.length > 0 && !this.isLoading1;
},
},
methods: {
fetchAccounts() {
console.log('fecth accounts called...')
if (this.accounts.length) return;
return fetch("http://192.168.2.74:4000/msp", { method: "POST" })
.then(res => res.json())
.then(data => {
this.accounts = data[0].msp_accounts;
this.mspName = data[0].msp_name;
console.log("msp accounts fetched");
console.log(this.accounts);
})
.catch(err => console.log(err));
},
save() {
console.log('save clicked');
console.log(this.tree1);
}
},
mounted() {
this.fetchAccounts();
}
};
</script><template>
<v-card>
<v-toolbar card color="grey lighten-3">
<v-icon>home</v-icon>
<v-toolbar-title></v-toolbar-title>
</v-toolbar>
<v-layout>
<v-flex>
<v-card-text>
<v-treeview
v-model="tree1"
:items="items2"
activatable
active-class="grey lighten-4 indigo--text"
selected-color="indigo"
open-on-click
selectable
expand-icon="mdi-chevron-down"
on-icon="mdi-bookmark"
off-icon="mdi-bookmark-outline"
indeterminate-icon="mdi-bookmark-minus"
></v-treeview>
</v-card-text>
</v-flex>
<v-divider vertical></v-divider>
<v-flex xs12 md6>
<v-card-text>
<div
v-if="selections1.length === 0"
key="title"
class="title font-weight-light grey--text pa-3 text-xs-center"
>Select your accounts</div>
<v-scroll-x-transition group hide-on-leave>
<v-chip v-for="(selection, i) in selections1" :key="i" color="grey" dark small>
<v-icon left small>trash-can</v-icon>
{{ selection.name }}
</v-chip>
</v-scroll-x-transition>
</v-card-text>
</v-flex>
</v-layout>
<v-divider></v-divider>
<v-card-actions>
<v-btn flat @click="tree1 = []">Reset</v-btn>
<v-spacer></v-spacer>
<v-btn class="white--text" color="green darken-1" depressed @click="save">
Save
<v-icon right>mdi-content-save</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</template>vuetify tag中可用的两件事
- V-Model
- 项目
解决方案
-
只需将所有尊重物品和儿童风格的项目中的所有数据推入。
-
仅在初始加载过程中检查数据，只需在创建钩子上通过V模型传递这些项目。
- 现在，检查输出已显示检查框。
希望它会有所帮助。！