将参数传递给Vue Bootstrap模态对话框。

huangapple go评论65阅读模式
英文:

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

&quot;bootstrap&quot;: &quot;^4.6.0&quot;,
 &quot;bootstrap-vue&quot;: &quot;^2.21.2&quot;,
 &quot;vue&quot;: &quot;^2.6.12&quot;,

In a Vue app and I need to pass a parameter to a Bootstrap Modal Dialog. My code is:

    &lt;input      
      v-b-modal.modal-center
      role=&quot;button&quot;
      class=&quot;btn btn-link&quot;
      type=&quot;button&quot;          
      value=&quot;Edit&quot;
      aria-disabled=&quot;false&quot;
      style=&quot;height: 40px; width: 120px; background-color: #efefef; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;&quot;
    /&gt; 

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.

     &lt;b-modal id=&quot;modal-center&quot; size=&quot;xl&quot; @shown=&quot;onModalShown&quot; @ok=&quot;onModalOk&quot;&gt;
     &lt;template slot=&quot;modal-title&quot;&gt;{{ centeredTitle }}&lt;/template&gt;

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 =&#39;Education and Training&#39;,
        this.newYear = &#39;&#39;;
        this.newData = &#39;&#39;;
        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:

 &lt;b-modal v-model=&quot;showModal&quot; ... &gt;

Your button needs a proper click handler:

  &lt;input      
      @click=&quot;OnEditClicked&quot;
      role=&quot;button&quot;
     ...
    /&gt; 

And your click handler will look like this:

    OnEditClicked() {
      this.centeredTitle =&#39;Education and Training&#39;;
      //Other properties which the modal needs... 
      this.showModal = true;
    }

huangapple
  • 本文由 发表于 2023年6月29日 21:31:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/76581544.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定