英文:
Pass a parameter to a Vue Bootstrap Modal Dialog
问题
我在一个Vue应用中使用以下代码,并需要将参数传递给Bootstrap模态对话框。我的代码如下:
<input
v-b-modal.modal-center
role="button"
class="btn btn-link"
type="button"
value="Edit"
aria-disabled="false"
style="height: 40px; width: 120px; background-color: #efefef; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;"
/>
我希望将一个centeredTitle
传递给对话框,以在标题栏上显示,并告诉它要将哪个JSON文件转换为数组以进行读取。
<b-modal id="modal-center" size="xl" @shown="onModalShown" @ok="onModalOk">
<template slot="modal-title">{{ centeredTitle }}</template>
</b-modal>
如果我在代码中设置centeredTitle
,它可以正常显示。但我想在不同的情境下使用相同的对话框,但具有不同的标题。
如果我取消注释this.centeredTitle
,我的代码将无法运行并显示空白屏幕,但它确实编译。
我已经阅读了https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal,但在Vue中无法使其正常工作。
英文:
I'm using
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"vue": "^2.6.12",
In a Vue app and I need to pass a parameter to a Bootstrap Modal Dialog. My code is:
<input
v-b-modal.modal-center
role="button"
class="btn btn-link"
type="button"
value="Edit"
aria-disabled="false"
style="height: 40px; width: 120px; background-color: #efefef; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;"
/>
And I want to pass a centeredTitle to the dialog to be displayed on the header and tell it what JSON file to convert to an array to read.
<b-modal id="modal-center" size="xl" @shown="onModalShown" @ok="onModalOk">
<template slot="modal-title">{{ centeredTitle }}</template>
If I set the centeredTitle in code it shows fine. But I want to use the same dialog for different areas but with a different title.
if I
onModalShown() {
// Clear the year and data fields
if (this.firstModalshow) {
// this.centeredTitle ='Education and Training',
this.newYear = '';
this.newData = '';
this.$refs.yearInput.focus();
this.tempItem = JSON.parse(JSON.stringify(this.EducationTraining));
this.firstModalshow = false;
}
},
and uncomment the this.centeredTitle my code will not run and gives a blank screen but it does compile.
I've read https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal
but I can't get it to work in Vue
答案1
得分: 1
你可以使用v-model
而不是v-b-modal.xxx
的语法,并在按钮的click
事件中设置它。这将允许你首先设置一些属性,然后模态框可以引用这些属性。
你的模态框需要一个v-model
:
<b-modal v-model="showModal" ... >
你的按钮需要一个正确的点击处理程序:
<input
@click="OnEditClicked"
role="button"
...
/>
然后你的点击处理程序将是这样的:
OnEditClicked() {
this.centeredTitle = 'Education and Training';
//其他模态框需要的属性...
this.showModal = true;
}
英文:
You can use a v-model
instead of the v-b-modal.xxx
syntax, and set it in the button's click
event. This will allow you to set some properties first, which the modal can then reference.
Your modal needs a v-model
:
<b-modal v-model="showModal" ... >
Your button needs a proper click handler:
<input
@click="OnEditClicked"
role="button"
...
/>
And your click handler will look like this:
OnEditClicked() {
this.centeredTitle ='Education and Training';
//Other properties which the modal needs...
this.showModal = true;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论