У меня есть модальный бутстрап, который при клике просто не появится.
Я пытался использовать v-show и v-if, а также только $ ("edit_user_password"). Modal ("show"); но ничего не получится
Импорт происходит здесь:
import EditPassword from "@/components/modals/edit_password.vue";
Зарегистрировать компонент:
components: {
EditPassword
},
Тогда я использую это в коде здесь:
<EditPassword v-show="this.password_modal"></EditPassword>
Затем событие нажатия кнопки:
<button @click="update_password()" class="btn btn-info btn-block">Edit Password</button>
Тогда он использует этот метод здесь:
update_password() {
console.log('Im clicking i promise');
this.password_modal = true;
$("edit_user_password").modal("show");
}
Модал выглядит так:
<template>
<div class="modal fade" id="edit_user_password" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Update Password</h4>
</div>
<div class="modal-body">
<div class="row">
<label for="password">Update Password</label>
<input
type="text"
v-model="password"
class="form-control"
id="password"
placeholder="Create new password"
>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
password: ""
};
}
};
</script>
Я просто сейчас смотрю на код и не могу понять, почему он не работает. Если у кого-то есть предложения, я был бы признателен.