Question

我正在创建vue js spa，我试图创建的是当我点击表格行时，它会显示一个带有/显示我点击的行数据的模态。

这里我创建了我的表

<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>

在<tr>我将@click方法设为模态显示，我想要显示到模态中的数据是来自该行/ <td>的每个<tr>的数据

现在我的modalContextMenu方法基本上是使模态可见/看起来像这样

modalContextMenu(){
    this.modalShow= true;
}

Answer 1

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

data () {
  modalData: ''
}

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

HTML

<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>

JS：

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

然后使用{{ modalData }}以模式访问数据。

将表行中的数据传递到引导模式

1 个答案: