如何使用 Vue.js 在表格单元格上绑定工具提示答案

【问题标题】：How to bind a tooltip on table cells with Vue.js如何使用 Vue.js 在表格单元格上绑定工具提示
【发布时间】：2017-12-20 08:03:05
【问题描述】：

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

我将item.id 与html 的id 和for 属性绑定，以显示带有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>

我也尝试绑定 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>

【问题讨论】：

请注意，在 HTML 的第一行中，您没有为标识为“items”的 div 使用右引号。
已编辑。谢谢！
您是否尝试将 id 绑定到 data-mdl-for 而不是 v-bind:for？我不明白为什么在 MDL 文档中，大工具提示绑定到“for”，而小工具提示绑定到“data-mdl-for”。
我刚试了，还是不行……谢谢建议

标签： javascript html vue.js material-design-lite

【解决方案1】：

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

Material Design Lite 将在页面加载时自动注册并呈现所有标记有 MDL 类的元素。但是，在动态创建 DOM 元素的情况下，您需要使用 upgradeElement 函数注册新元素。

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 配合得很好，但你得到了这个想法。

【讨论】：