I am using v-treeview to make nested selection. How can I make some items are selected during initial loading? How can we access the checkbox properties of items in a treeview? After selections, the v-model array gives the aray of selected items, I have tried updating this array during loading but did not work.
Please see below code, on Save click, tree1 array gets updated with selected item Ids. I have tried, adding some Id's to this array to make simulate selected items but did nit help.
<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>