Vue.js - Modal seems to be not working inside a table

Question

My goal is to have a button that will show a specific data in each row using a dialog or modal box. first I will show my script code for creating a dialog in my main index file:

and here's my code for one of the components:

  
            
              
                Product Type
                Measurements
                Quantity
                Preferred Tailor
                Customer Info
                Accept Order
              
            
            
              
                {{ order.productType }}
                
                
                
                  Customer's measurements
                  
                    {{ order.id }}
                  
                  
                    
                  
                
                
                {{ order.quantity }}
                {{ order.tailorShops }}
                
                
                
                
                  Customer's measurements
                  
                    {{ order.id }}

and here's the script for the button for dialog:

methods: {
    showDialog: function(){
      dialog.showModal();
    }
  }

it was supposed to display a button in a column that will be clicked to show the id (for now) of the corresponding row of the table. but when I click the button in that column an error says that Uncaught TypeError: Cannot read property 'showModal' of null

I don't understand because it worked perfectly fine on the other page where I didn't put it inside a table. So I'm assuming that the dialog element being inside the table is causing the error.

Is my assumption right? what am I missing in my code?

user_38065 · Answer

This code:

var dialog = document.querySelector('dialog');

if (!dialog.showModal) {
  dialogPolyfill.registerDialog(dialog);
}

initializes one dialog element. But the code is now potentially rendering many dialogs (because there is more than one row in a table). I suspect you want to initialize all the dialogs using querySelectorAll and looping through the results. This initialization code will need to be handled in the mounted lifecycle handler and you will need to keep track of which dialog to open when the button is clicked.

So yes, to a certain extent, rendering your code in a table caused it to break, but it's mainly because you now have potentially many dialogs.

Here is an example (requires a browser that supports the dialog element).

console.clear()

new Vue({
  el: "#app",
  data:{
    people: [
      {
        name: "Bob",
        message: "Hi Bob"
      },
      {
        name: "Mary",
        message: "Hello Mary"
      },
      {
        name: "Jane",
        message: "Howdy Jane"
      },
      
    ]
  }
})



  
    
      {{person.name}}
      
        
        
          {{person.message}}

Vue.js - Modal seems to be not working inside a table

1 Answers