Question

我的目标是使用一个按钮，使用对话框或模态框在每行中显示特定数据。首先，我将在主索引文件中显示用于创建对话框的脚本代码：

<!-- DIALOG ELEMENT REGISTRY -->
    <script>
      var dialog = document.querySelector('dialog');
      //UNCOMMENT THE FOLLOWING CODE BELOW IF THIS APP WILL BE RUN IN OTHER BROWSERS OTHE THAN CHROME AND OPERA
      if (!dialog.showModal) {
       dialogPolyfill.registerDialog(dialog);
      }
    </script>

这是我的代码之一：

  <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
            <thead>
              <tr>
                <th class="mdl-data-table__cell--non-numeric">Product Type</th>
                <th>Measurements</th>
                <th>Quantity</th>
                <th>Preferred Tailor</th>
                <th>Customer Info</th>
                <th>Accept Order</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="order in orders">
                <td class="mdl-data-table__cell--non-numeric">{{ order.productType }}</td>
                <td>
                <button class="mdl-button mdl-js-button mdl-js-ripple-effect" v-on:click.prevent="showDialog">
                  See Measurements
                </button>
                <dialog class="mdl-dialog">
                  <h4 class="mdl-dialog__title">Customer's measurements</h4>
                  <div class="mdl-dialog__content">
                    {{ order.id }}
                  </div>
                  <div class="mdl-dialog__actions">
                    <button id="add" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
                      <i class="material-icons">done</i>
                    </button>
                  </div>
                </dialog>
                </td>
                <td>{{ order.quantity }}</td>
                <td>{{ order.tailorShops }}</td>
                <td>
                <button class="mdl-button mdl-js-button mdl-js-ripple-effect">
                  See customer info
                </button>
                <!-- DIALOG FOR MEASUREMENTS -->
                <dialog class="mdl-dialog" id="dialogBox">
                  <h4 class="mdl-dialog__title">Customer's measurements</h4>
                  <div class="mdl-dialog__content">
                    {{ order.id }}
                  </div>
                  <div class="mdl-dialog__actions">
                    <button id="add" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
                      <i class="material-icons">done</i>
                    </button>
                  </div>
                </dialog>
                </td>
                <td>
                  <button id="accept" class="mdl-button mdl-js-button mdl-button--icon">
                    <i class="material-icons">assignment_turned_in</i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>

这是对话框按钮的脚本：

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

它应该在列中显示一个按钮，该按钮将被单击以显示该表的相应行的id（现在）。但是，当我单击该列中的按钮时，错误会显示Uncaught TypeError: Cannot read property 'showModal' of null

我不明白，因为它在我没有把它放在桌子里的其他页面上工作得很好。所以我假设表格内的对话框元素导致错误。

我的假设是对的吗？我的代码中缺少什么？

Answer 1

此代码：

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

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

初始化一个对话框元素。但是代码现在可能会呈现许多对话框（因为表中有多行）。我怀疑你想使用querySelectorAll初始化所有对话框并循环结果。此初始化代码需要在mounted生命周期处理程序中处理，您需要跟踪单击按钮时要打开的对话框。

所以是的，在某种程度上，在表格中渲染代码会导致代码中断，但这主要是因为您现在可能有许多对话框。

以下是一个示例（需要支持dialog元素的浏览器）。

＆＃13;

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

＆＃13;

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <table>
    <tr v-for="person, ndx in people">
      <td>{{person.name}}</td>
      <td>
        <button @click="$refs.messageDialog[ndx].showModal()">Say Hello</button>
        <dialog ref="messageDialog">
          {{person.message}}
          <button @click="$refs.messageDialog[ndx].close()">Close</button>
        </dialog>
      </td>
    </tr>
  </table>
</div>

＆＃13;

Vue.js - Modal似乎无法在表格内工作

1 个答案: