Passing data to another component in VueJS

Question

I know there is plenty of similar questions but I've read many of them, tried what's explained in them and I'm still not able to achieve that simple task..passing data to another component in VueJS.. I also read the docs and I couldn't manage to do it. I'm getting crazy.. Maybe I'm missing something.

The idea is :

I have a list of users :

and clicking the blue button of a row should open the details of that user in another "page" (component).

Here is my template for the list of users :

  <template>
    <div>
      <b-table hover :items="users" :fields="table_fields">
        <template v-slot:cell(isActive)="row">
          <b-badge v-if="row.item.isActive" variant="success">Active</b-badge>
          <b-badge v-else>Archived</b-badge>
        </template>
        <template v-slot:cell(actions)="row">
          <span v-if="row.item.isActive">
            <b-button to="{ name: 'UserForm', params: { user: row.item }}" size="sm" variant="primary" class="mr-1" title="Edit">
              <font-awesome-icon :icon="['fas', 'pen']"/>
            </b-button>
            <b-button @click="archiveUser(row.item.id)" size="sm" class="mr-1" title="Archive">
              <font-awesome-icon :icon="['fas', 'archive']"/>
            </b-button>
          </span>
          <b-button v-else @click="unarchiveUser(row.item.id)" size="sm" variant="success" class="mr-1" title="Unarchive">
            <font-awesome-icon :icon="['fas', 'caret-square-up']"/>
          </b-button>
          <b-button @click="deleteUser(row.item.id)" size="sm" variant="danger" class="mr-1" title="Delete">
            <font-awesome-icon :icon="['fas', 'trash-alt']"/>
          </b-button>
        </template>
      </b-table>
    </div>
  </template>

Specifically, here is the blue button :

      <template v-slot:cell(actions)="row">
        ...
        <b-button to="{ name: 'UserForm', params: { user: row.item }}" size="sm" variant="primary" class="mr-1" title="Edit">
          <font-awesome-icon :icon="['fas', 'pen']"/>
        </b-button>
        ...
      </template

You can see that I'm trying to call the UserForm with the paramater user which is set to the corresponding row.item.

Here is my UserForm (for now I'm just trying to display at least the username to see if it works) :

<template>
  <div>
    <h3>Hi !</h3>
    <div>
      {{ user.username }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserForm',
  props: {
    user: Object
  },
  data () {
    return {
    }
  }
}
</script>

And my URLs in index.js :

export default new Router({
  routes: [
    {
      path: '/',
      name: 'MainApp'
    },
    {
      path: '/expgroups',
      name: 'GroupList',
      component: GroupList
    },
    {
      path: '/users',
      name: 'UserList',
      component: UserList
    },
    {
      path: '/user/edit',
      name: 'UserForm',
      component: UserForm,
      props: true
    }
  ]
})

Could anybody help me ? That would be great. Tell me in comments if some parts of code is missing. Thanks in advance.

Answer 1

You need :to for routing with params like below

  <template v-slot:cell(actions)="row">
    ...
    <b-button :to="{ name: 'UserForm', params: { user: row.item }}" size="sm" variant="primary" class="mr-1" title="Edit">
      <font-awesome-icon :icon="['fas', 'pen']"/>
    </b-button>
    ...
  </template