CODEWITHSUNDEEP
vue.jsvuejs2vue-component
PamanBeruang
PamanBeruang

Reputation: 1589

Passing data from table row into bootstrap modals

I'm creating vue js spa and what i trying to create is when i click on table row, it will show a modals with/showing data from the row that i clicked on.

here i have created my table

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

at <tr> i put @click methods that make modal show and data that i want to show into modals is data from each <td> for that row / <tr>

right now my modalContextMenu methods is basically make modals visible/appear like this

modalContextMenu(){
    this.modalShow= true;
}

Upvotes: 0

Views: 1841

Answers (1)

Shubham Patel
Shubham Patel

Reputation: 3289

You can create a data property for the data you want to show in the modal.

data () {
  modalData: ''
}

Then you can set that property in onClick function.

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

Then access the data in modal using {{ modalData }}.

Upvotes: 1

Related Questions