[Vuejs]-Vue, click on table cell with data and show that data in modal

by

3👍

✅

Create another data property called currentItem then assign the click item to it when you click on the table row :

<div id="app">
  <table>
  <tbody>
    <tr>
      <td v-for="name in names"  @click="showModal(name )"></td>
      <td>@{{ name }}</td>
    </tr>
  </tbody>
  </table>


  <div class="modal-vue">
    <!-- overlay to help with readability of modal -->
    <div class="overlay" v-if="showDetailModal" @click="showDetailModal = false"></div>

    <!-- Modal for detail on table cell click event -->
    <div class="modal" v-if="showDetailModal">
      <button class="close" @click="showDetailModal = false">x</button>
      <h3>@{{ currentItem.age }}</h3>
    </div>
  </div>
</div>


new Vue({
  el: "#app",
  props: { 

  },
  data: {
    showDetailModal: false,
    names: [
      {
        "name":"Amy",
        "age":37
      },
      {
        "name":"James",
        "age":39
      }
    ],
    currentItem:{name:'',age:''}
  },
methods:{
  showModal(item){
     this.showDetailModal = true;
     this.currentItem=item
  }

}
})
👤Boussadjra Brahim

0👍

The reason for name resulting undefined is because it lives only inside the v-for loop.

For this reason, when the table gets clicked, you need to store which user has been clicked. This way, the modal can show the selected user based on that value.

The solution suggested from Boussadjra Brahim works great, however maybe it could be a little cleaner by removing showDetailModal data.


<div id="app">
  <table>
  <tbody>
    <tr>
      <td v-for="name in names"  @click="showModal(name )"></td>
      <td>@{{ name }}</td>
    </tr>
  </tbody>
  </table>


  <div class="modal-vue">
    <!-- overlay to help with readability of modal -->
    <div class="overlay" v-if="currentItem" @click="currentItem = false"></div>

    <!-- Modal for detail on table cell click event -->
    <div class="modal" v-if="currentItem">
      <button class="close" @click="currentItem = false">x</button>
      <h3>@{{ currentItem.age }}</h3>
    </div>
  </div>
</div>


new Vue({
  el: "#app",
  props: { 

  },
  data: {
    names: [
      {
        "name":"Amy",
        "age":37
      },
      {
        "name":"James",
        "age":39
      }
    ],
    currentItem: false
  },
methods:{
  showModal(item){
     this.currentItem=item
  }

}
})
👤Freder

Leave a comment