Vue.js 将数据从表行传递到引导模式

我正在创建vue js spa，我试图创建的是，当我单击表行时，它将显示一个modals，其中包含/显示我单击的行中的数据

在这里，我创建了我的表

<tr class="cursor-pointer" @click="modalContextMenu">
    <td>
        <img :src="'/images/artikel/' + props.item.images + 'n.jpg'" class="img-rounded img-sm" v-if="props.item.images">
        <img :src="'/images/image-articlen.jpg'" class="img-rounded img-sm" v-else>
    </td>
    <td>{{props.item.name}}</td>
    <td>{{props.item.category.name}}</td>
    <td>{{props.item.writter}}</td>
    <td v-html="$options.filters.checkStatus(props.item.publish)"></td>
    <td v-html="$options.filters.checkStatus(props.item.featured)"></td>
    <td>{{props.item.created_at | publishDate}}</td>
</tr>

---

可以为要在模式中显示的数据创建数据属性

data () {
  modalData: ''
}

然后可以在onClick函数中设置该属性

HTML

---

然后使用

{{modalData}}

访问modal中的数据我不清楚您要的是什么？模态不显示还是什么？

data () {
  modalData: ''
}

<tr class="cursor-pointer" @click="modalContextMenu(data)">
  <td>
    <img :src="'/images/artikel/' + props.item.images + 'n.jpg'" class="img-rounded img-sm" v-if="props.item.images">
    <img :src="'/images/image-articlen.jpg'" class="img-rounded img-sm" v-else>
  </td>
  <td>{{props.item.name}}</td>
  <td>{{props.item.category.name}}</td>
  <td>{{props.item.writter}}</td>
  <td v-html="$options.filters.checkStatus(props.item.publish)"></td>
  <td v-html="$options.filters.checkStatus(props.item.featured)"></td>
  <td>{{props.item.created_at | publishDate}}</td>
</tr>

modalContextMenu(data) {
  this.modalData = data;
  this.modalShow= true;
}