最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin0浏览0评论

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.

发布评论

评论列表(0)

  1. 暂无评论