In my Nuxt 3.13.0 project I have a v-treeview. I want the data from the node selected by the user to be synchronised to "activeNodes":
<template>
<v-col v-if="treePopulated" cols="7" class="pa-0">
<v-treeview
activatable
:active.sync="activeNodes"
color="#965F1A"
hoverable
:items="certificatesTree"
dense
/>
<button @click="buttonPressed">Here</button>
</v-col>
</template>
<script setup>
const activeNodes = ref(["Initial value"]);
const treePopulated = ref(false);
const certificatesTree = ref([
{
id: 1,
title: 'Cars',
children: [
{ id: 11, title: 'Chevrolet', children: [{id: 111, title: "Chev Model 1"},
{id: 112, title: "Chev Model 2"}] },
{ id: 12, title: 'Ford', children: [{id: 121, title: "Ford Model 1"},
{id: 122, title: "Ford Model 2"}] },
{
id: 13,
title: 'Mazda',
children: [{id: 131,title: "Mazda Model 1"},
{id: 132,title: "Mazda Model 2"}],
},
],
},
{
id: 2,
title: 'Bikes',
children: [
{ id: 21, title: 'AKT', children: [{id: 211,title: "AKT Model 1"},
{id: 212,title: "AKT Model 2"}] },
{ id: 22, title: 'BMW', children: [{id: 221,title: "BMW Model 1"},
{id: 223,title: "BMW Model 2"}] },
{
id: 23,
title: 'Yamaha',
children: [{id: 231,title: "Yamaha Model 1"},
{id: 232,title: "Yamaha Model 2"}],
},
],
},
]);
function getFullTree() {
//Get data from api and add to tree
treePopulated.value = true;
return certificatesTree.value
}
function buttonPressed(){
console.log("ActiveNodes")
console.log(activeNodes.value);
}
</script>
The problem is that the value of activeNodes is not updated, as the console always logs "initial value". Vuetify version is 3.7.1 btw.