將數據從表格行傳遞到引導模式

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 }}訪問模態的數據。