Vue, click on table cell with data and show that data in modal

Question

I have a modal in my vue component, which is working well if I just put static text in it, so I know it's perfectly functional

However, trying to pass data from the table cell being clicked into the modal is failing and saying that name is undefined.

What am I doing wrong trying to pass data for each cell into this modal?

<div id="app">
  <table>
  <tbody>
    <tr>
      <td v-for="name in names"  @click="showDetailModal = true"></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>@{{ name.age }}</h3>
    </div>
  </div>
</div>


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

  },
  data: {
    showDetailModal: false,
    names: [
      {
        "name":"Amy",
        "age":37
      },
      {
        "name":"James",
        "age":39
      }
    ]
  }
})

Boussadjra Brahim · Accepted Answer · 2021-08-19 03:22:51Z

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
  }

}
})

edited Aug 19, 2021 at 3:22

answered Aug 18, 2021 at 22:07

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Geoff_S Over a year ago

So the function is being called properly because I can print a console.log within the function, however, the modal now no longer shows up. I even printed the status of showDetailModal to the console and it shows the correct status but the modal isn't showing now

Boussadjra Brahim Over a year ago

you're welcome, I've made mistake, it should be this.showDetailModal = true; instead of showDetailModal = true,

Freder · Accepted Answer · 2021-08-18 22:42:17Z

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
  }

}
})

Collectives™ on Stack Overflow

Vue, click on table cell with data and show that data in modal

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related