#javascript #vue.js #vuejs2 #vuetify.js
#javascript #vue.js #vuejs2 #vuetify.js
Вопрос:
Какой самый простой способ получить (идентификатор) узла, на который только что нажали в a <v-treeview> ? Существует update:open событие, которое выдает массив всех открытых узлов. Я мог бы временно сохранить весь массив и сравнить новую версию со старой, чтобы увидеть, какой элемент был добавлен или удален. Но это кажется немного громоздким, не так ли? Я хочу использовать идентификатор узла для динамической перезагрузки дочерних элементов дочерних элементов узла из серверной части, чтобы у пользователя было ощущение, что данные уже находятся во внешнем интерфейсе. Может быть, можно выдать в update:open событии не весь массив, а только текущий узел, как-то так: @update:open="onExpand(item)" ? (Это выдает ошибку Property or method "item" is not defined .)
Комментарии:
1. включите код в <vtreeview>
Ответ №1:
Вы могли бы использовать VTreeView ‘s label slot, который передает item себя в свой слот реквизитов. В этом слоте вы могли бы отобразить a span с click помощью обработчика, который также включает элемент:
<template>
<v-treeview :items="items">
<template #label="{ item }">
<span @click="onItemClick(item)">{{item.name}}</span>
</template>
</v-treeview>
</template>
<script>
export default {
methods: {
onItemClick(item) {
console.log(item.id)
}
}
}
</script>
Комментарии:
1. Поддержано, поскольку это хороший обходной путь. Но имейте в виду, что событие click будет запускаться только при нажатии на метку узла treeview, а не при нажатии на стрелки слева. codesandbox.io/s/crazy-morning-nqirn?file=/src/components /…
2. В итоге я использовал поддержку load-children.
Ответ №2:
Вы можете использовать update:active с return-object реквизитом. Он вернет полный объект вместо идентификатора узла.