vue.js - I can't synchronize data from v-treeview - Stack Overflow

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

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.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1742398204a4436375.html

相关推荐

  • vue.js - I can&#39;t synchronize data from v-treeview - Stack Overflow

    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

    3小时前
    20

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信