[Vuejs]-Vue.js modal not show when

0👍

This works for me, – passing data to the modal:

My AdminPanel.vue

<template>
  <!--list users-->
  <div class="all-users" id="el">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <div class="panel panel-default">
            <div class="panel-heading">Список пользователей</div>
            <div class="panel-body">
              <table class="table">
                <thead>
                <tr>
                  <th>ID</th>
                  <th>Username</th>
                  <th>Roles</th>
                  <th>Edit</th>
                  <th>Delete</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="user in allUsers" :key="user.id">
                  <td>{{ user.id }}</td>
                  <td>{{ user.username }}</td>
                  <td>
                    <div v-for="role in user.roles" :key="role.id">
                      {{ role.name }}
                    </div>
                  </td>
                  <td>
                    <b-button size="sm" v-b-modal="'editUserModal'" @click="editUser(user)">Изменить</b-button>
                  </td>
                  <td>
                    <button class=”Search__button” @click="deleteUserById(user.id)">Удалить</button>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--modal-->
    <b-modal id="editUserModal">
      id {{updateUser.id}}
      username {{updateUser.username}}
      password {{updateUser.password}}
      role {{updateUser.role}}
    </b-modal>
  </div>
</template>

<script>
import api from './backend-api'

export default {
  name: 'AdminPanel',
  data() {
    return {
      allUsers: [],
      errors: [],
      modalIsVisible: false,
      updateUser: {
        username: '',
        password: '',
        role: '',
        id: ''
      }
    }
  },
  methods: {
    getAllUsers() {
      console.log('in getAllUsers()')
      api.getAllUsers()
        .then(response => {
          // JSON responses are automatically parsed.
          console.log('in api.getAllUsers()')
          this.allUsers = response.data
        })
        .catch(e => {
          this.errors.push(e)
        })
    },
    deleteUserById(id) {
      console.log('in deleteUserById()')
      api.deleteUserById(id)
        .then(response => {
          console.log(response)
          const index = this.allUsers.findIndex(user => user.id === id)
          console.log('find the user index')
          if (~index) {
            console.log('if the user exists in array')
            this.allUsers.splice(index, 1)
            console.log('delete the user')
          }
        })
    },
    editUser(user) {
      console.log('in editUser')
      console.log(user)
      this.updateUser.id = user.id
      this.updateUser.username = user.username
      this.updateUser.password = user.password
      this.updateUser.role = user.roles[0].name
      console.log(this.updateUser)
    }
  },
  created() {
    console.log('in created()')
    this.getAllUsers()
  }
}
</script>

<style scoped>

</style>

Enrique Bermúdez’s answer helped me here https://stackoverflow.com/a/51271664/11422030

Leave a comment