小编Pro*_*oke的帖子

我目前正在研究工作中使用Vue.JS.

目前我主要从事前端方面的工作.我有一个包含几个条目的表,并且在单击该行时,我想要一个模态弹出窗口以显示该行的更多详细信息.

我只是想让多个弹出窗口正常工作,并且一旦正常工作,它将处理每个弹出窗口中的动态内容.

目前,第一行的工作方式如下所示:

<tr class="activate-popupmodal-tr" @click="showmodal = true">
                      <td>01/01/2016

                        <modal :show.sync="showmodal">

                          <h3 slot="header">
                            Bug #1 - <span> 04/07/2016 </span>

                            <img src="files/cross.jpg" @click="showmodal = false" />
                          </h3>


                          <div slot="body">
                          </div>

                          <div slot="footer">
                         </div>

                        </modal>
</tr>

使用app.js:

Vue.component('modal', {
  template: '#dashboard-popup-template',
  props: {
    show: {
      type: Boolean,
      required: true,
      twoWay: true
    }
  }
})

new Vue({
  el: '.activate-popupmodal-tr',
  data: {
    showmodal: false
  }
})

这有效,但只在一行.关于如何让它工作的任何想法？

表:https://jsfiddle.net/a6n04o3t/