Vue.js modal not show when

Question

I am new to Vue.js and cannot open a modal window to update a record in a table with all users. I want to pass the user id to the function for further work with this user in the function. Any help!

Here is my AdminPanel.vue:

html:

Here I am rendering a table with a list of users

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

                    <button type="button" class="btn btn-primary" @click="openModal(user.id)">Update</button>

                  </td>
                  <td>
                    <button class=”Search__button” @click="deleteUserById(user.id)">Delete</button>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--modal-->
    <div v-if="modalIsVisible">
      <transition name="modal">
        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">Изменить {{ user.username }}</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" @click="closeModal()">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" @click="closeModal()">Закрыть</button>
                  <button type="button" class="btn btn-primary">Сохранить</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

js:

And here I am doing CRUD operations. For update, I want to call a function that will open a modal window and display the user data to change

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

export default {
  name: 'AdminPanel',
  data() {
    return {
      allUsers: [],
      errors: [],
      modalIsVisible: false,
      updateUser: {
        username: '',
        password: '',
        role: '',
        id: 0
      }
    }
  },
  methods: {
    getAllUsers() {
      api.getAllUsers()
        .then(response => {
          this.allUsers = response.data
        })
        .catch(e => {
          this.errors.push(e)
        })
    },
    deleteUserById(id) {
      api.deleteUserById(id)
        .then(response => {
          const index = this.allUsers.findIndex(user => user.id === id)
          if (~index) {
            this.allUsers.splice(index, 1)
          }
        })
    },
    openModal(id) {
      this.modalIsVisible = true
      api.getUser(id).then(response => {
        this.updateUser.id = response.data.id
        this.updateUser.username = response.data.username
        this.updateUser.password = response.data.password
        this.updateUser.role = response.data.roles[0].name
      })
    },
    closeModal() {
      this.modalIsVisible = false
    }
  },
  created() {
    this.getAllUsers()
  }
}
</script>

It looks like your code would work assuming `allUsers` contains an array of objects, each containing `id`. What's the issue you're seeing? Can you link to a reproduction? — tony19, Feb 22 '21 at 15:18
unfortunately I do not have a reproduction (fiddle, etc.). In the console I see all the data of the user I want to update, but the modal window does not open. If you assign true modalIsVisible in the button tag, then the modal window opens. But I want to use a function to update the user. Pass the user id to this function to get this user from the database and fill in the fields of the modal window for later change. I redid this example [https://v3.vuejs.org/examples/modal.html](https://v3.vuejs.org/examples/modal.html) - changing modalIsVisible in function. — Igor Khilkevich, Feb 22 '21 at 16:28

Igor Khilkevich · Accepted Answer · 2021-02-22T21:39:37.740

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

Vue.js modal not show when

1 Answers1