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

Time:07-04

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  :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  @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}})
}

CodePudding user response:

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.

  • Related