javascript - 如何使用 Vue.js 在表格单元格上绑定(bind)工具提示

Question

我有一个使用 Vue.js 在 items 上生成的表。

我将 item.id 与 html 的 id 和 for 属性绑定(bind)，以显示带有 MDL 的工具提示但这个没有显示。

我做错了什么？

<div id="items">
    <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
        <thead>
            <tr>
                <th>
                    Status
                </th>
                <th>
                    Name    
                </th>
            </tr>
        </thead>
        <tbody>                
            <tr v-for="item in items">
                <td>
                    <i v-if="item.isActive" class="material-icons" style="color:#4CAF50">power_settings_new</i>
                    <i v-else class="material-icons" style="color:#F44336">power_settings_new</i>
                </td>

                <!-- HERE -->
                <td v-bind:id="item.id">

                    {{ item.shortName }}

                    <!-- v-bind working but tooltip is not showing. -->
                    <div class="mdl-tooltip mdl-tooltip--large" v-bind:for="item.id">
                        {{ item.name }}
                    </div>
                </td>                   
            </tr>
        </tbody>
    </table>
</div>

我还尝试绑定(bind)在 div 而不是 td 上，遗憾的是它也不起作用。

                <div v-bind:id="item.id">
                    {{ item.shortName }}
                </div>
                <div class="mdl-tooltip mdl-tooltip--large" v-bind:for="item.id">
                    {{ item.name }}
                </div>

Answer 1

我不熟悉 Material Design Lite 库，但我猜这可能与以下事实有关:您的元素是由 Vue 动态生成的，并且 MDL 库扫描 DOM 并在其上配置您的组件仅页面加载:

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.

MDL 和 Vue 不能很好地协同工作；您必须在代码中手动告知 MDL 有关任何动态 DOM 更改的信息，例如:

var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);

参见Use MDL on dynamic websites了解更多信息。

---

这完全未经测试，但也许您可以编写一个 Vue 指令，允许您在新的 DOM 元素上调用 updateElement:

Vue.directive('mdl-element', {
  update(el) {
    componentHandler.upgradeElement(el)
  }
})

<div class="mdl-tooltip mdl-tooltip--large" v-bind:for="item.id" v-mdl-element>

我什至不确定是否可以在同一个元素上多次调用 upgradeElement ，并且 upgradeElement 可能会用其他实际上不是的元素完全替换该元素想要与 Vue 很好地配合，但你明白了。