CODEWITHSUNDEEP
apivue.jsparameterstreeviewvue-router
Sanaz Baghban
Sanaz Baghban

Reputation: 155

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

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

Upvotes: 0

Views: 630

Answers (1)

Ali Sharafi
Ali Sharafi

Reputation: 116

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.

Upvotes: 1

Related Questions