Vue.js 模态不显示何时

Question

我是 Vue.js 的新手，无法打开模式窗口来更新包含所有用户的表中的记录。我想将用户 ID 传递给函数，以便在函数中与该用户进一步合作。 任何帮助！

这是我的 AdminPanel.vue：

1. html:

这里我正在渲染一个包含用户列表的表格

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

1. js:

我在这里进行 CRUD 操作。 对于更新，我想调用一个函数，该函数将打开一个模式窗口并显示要更改的用户数据

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

Answer 1

这对我有用， - 将数据传递给模态：

我的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 的回答在这里帮助了我 https://stackoverflow.com/a/51271664/11422030