Vue 3 how to get id of selected tree Node and pass as params with API id

Question

I'm using tree view for my application and I'm getting the id of each when checkbox selected as how it is here:

<blocks-tree class="border-bottom" :data="treeData" :horizontal="treeOrientation==='0'"
                                 :collapsable="true">
                      <template #node="{data}">
                      <span>
                          <input type="checkbox"

                                 :checked="selected.indexOf(data.some_id)> -1"
                                 @change="(e)=>toggleSelect(data,e.target.checked)"/> 
                        {{data.label}}
                      </span>
                      </template>
  </blocks-tree>
         

<button class="btn" @click="editState(selected)">
                      ایجاد ساختمان
                      <br>
                      Selected: {{selected}}
 </button>

the toggle select is like:

const toggleSelect = (node, isSelected) => {
      isSelected ? selected.value.push(node.some_id) : selected.value.splice(selected.value.indexOf(node.some_id), 1);
      if(node.children && node.children.length) {
        node.children.forEach(ch=>{
          toggleSelect(ch,isSelected)
    })
 }
}

now I want to get the id of the selected node with @click and pass it as params to another route. can anyone help me with it please?

 editState(id) {
  this.$router.push({name: 'RealStateForm', params: {id: id}})
}

Answer 1

actually, it relates to Vue-router and in Vue 2 I did like this: I have a route with these params:

{
path: "/natural-users/:userId?/:committeeId?",
components: {
  main: Registration,
  top: Top,
  right: Right
},
beforeEnter: (to, _from, next) => {
  if (!ability.isSelfUser(to.params.userId)) next("/");
  next();
},
props: { main: true }

and when I want to redirect to this route I do like this:

this.$router.push(`/natural-users/${this.userID}/${this.commitee}`)

I hope this helps you.