テーブル行からブートストラップモーダルにデータを渡す

Question

私はvue js spaを作成しています。作成しようとしているのは、テーブル行をクリックすると、クリックした行のデータを表示/表示することです。

ここで私は私がモーダルに表示するモーダルショーやデータは、その行の各<td>/<tr>

からのデータであることを確認@click方法を置く<tr>で

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

私のテーブルを作成しました現在、私の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 }}を使用してモーダル内のデータにアクセス。