如何将此对象传递给车把中的模式对象？

问题描述

所以我要根据阵列的大小渲染多张卡片。

    <div id="list-of-favorite-recipes" class="row">
        {{#each recipes }}
    <div class="col-md-6 col-lg-3 mb-5">
      <div class="card">
        <div style="background-image: url({{this.image}})" class="card-img-top"></div>
        <div class="card-body">
          <h5 class="card-title">{{this.title}}</h5>
          <p>{{{splitString this.summary}}}...</p>
        </div>
        <button class="btn my-2" type="button" data-toggle="modal" data-target="#recipeModal">Read Recipe</button>
      </div>
    </div>
        {{/each}}
    </div>

每当有人按下“阅读食谱”按钮时，我都希望模态与单击该按钮的卡中的数据一起出现。这是我想看到的模式：

<div id="recipeModal"  class="modal">
<div class="modal-header">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb purple lighten-4">
          <li class="breadcrumb-item"><a href="#">home</a><i class="fas fa-angle-right mx-2 breadcrumb-green"
              aria-hidden="true"></i>
          </li>
          <li class="breadcrumb-item"><a href="#">recipe</a><i class="fas fa-angle-right mx-2 breadcrumb-green"
              aria-hidden="true"></i></li>
          <li class="breadcrumb-item active">{{this.title}}</li>
        </ol>
      </nav>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-sm-4 col-md-4">
          <img src="{{this.image}}" alt="Responsive image" class="img-responsive modal-img">
        </div>
        <div class=" col-sm-8 col-md-8">
          <h1 class=" main-title-modal">{{this.title}}</h1>
          <p>{{{this.summary}}}</p>
        </div>
      </div>
      <section class="fieldset">
        <div class="specs-wrapper">
          <h4>Specs</h4>
          <div class="specs">
            <div class="specs-content">
              <h2> Total</h2>
              <div class="specs">
                <div class="wrapper-specs">
                  <h3>{{this.readyInMinutes}}</h3>
                </div>
                <div class="specs-minutes">minutes </div>
              </div>
            </div>
            <div class=" specs-content">
              <h2>Servings</h2>
              <div class=" specs">
                <div class="wrapper-specs">
                  <h3 class="price">{{this.servings}}</h3>
                </div>
                <div class="specs-minutes">people</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {{!-- <div class="row">
        <div class="col-sm-6 col-md-6">
          <h1 class="sub-title-modal">Ingredients</h1>
          <ul>
            {{{reduceIngredients this.ingredients}}}
          </ul>
        </div>
        <div class="col-sm-6 col-md-6">
          <h1 class="sub-title-modal">Steps</h1>
          <ul>
            {{{reduceSteps this.steps}}}
          </ul>
        </div>
      </div> --}}
      <div class="additional-recipes">
      <div class="modal-love">You may also love</div>
    </div>
    <!--/modal body -->
    <div class="modal-footer">
      <button type="button" class="btn my-2" data-dismiss="modal">Close</button>
    </div>
    </div>

如何通过单击按钮将信息从卡中传递给模态？我尝试将onclick事件与车把帮助功能一起使用，但仍无法传递信息。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）