Shiva
2 months ago
770
7
Vue

How to get vue router to go to another page

Posted 2 months ago by Shiva

I have a laravel vue app and I'm trying to create a roles and permissions page that links to the users page.

The problem I'm having is that, when you're on the permissions page and you open up the users panel and you select a user and you decide you need to change their details and you click on their edit button and that should take you to the users page.

So far I've only managed to get the url to change but the page stays on the permissions page.

My permissions.vue

<template>
  <div>
    <h3>Users</h3>

    <div>
      <table>
        <thead>
          <tr>
            <th>Permission Name</th>
            <th style="width:240px;"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="permission in permissions">
            <td>{{permission.name}}</td>
            <td style="text-align: right;">
              <button class="btn btn-sm btn-outline-info" @click="users(permission)">
                Users
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['emit', 'roles'],
    data() {
      return {

      }
    },
    computed: {

    },
    mounted() {

    },
    methods: {
      users(permission) {
        this.emit.$emit('edit-users', { permission: permission });
      }
    }
  }
</script>

this.emit.$emit('edit-users', { permission: permission }); then opens up the users panel on the permission page

<template>
  <div>
    <h3>Users in <strong>{{permission.name}}</strong></h3>

    <div>
      <table>
        <thead>
          <tr>
            <th>User</th>
            <th style="width:120px;"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in users">
            <td>{{user.name}}</td>
            <td style="text-align: right;">
              <button class="btn btn-sm btn-outline-info" @click="edit(user)">
                Edit
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['emit', 'role'],
    data() {
      return {
        users: []
      }
    },
    computed: {

    },
    mounted() {
      this.getUsers();
    },
    watch: {

    },
    methods: {
      getUsers() {
        axios.get('/admin/permissions/'+this.permission.name+'/users').then(response => {
          this.users = response.data.users;
        });
      },
      edit(user) {
        this.$router.push({name: 'Users', params: {id: user.id}});
      }
    }
  }
</script>

in my permissions.js I have

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import Users from "../users/Users";

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/admin/users/:id',
      name: 'Users',
      component: Users
    }
  ]
})

if (document.getElementById('permissions')) {
  const app = new Vue({
    el: "#permissions",
    router,
    data() {
      return {
        emit: new Vue(),
      }
    },
    methods: {

    },
    mounted() {

    }
  });
}

Please sign in or create an account to participate in this conversation.