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

Question

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

我用qtml qazxsw poi和qazxsw poi属性绑定qazxsw poi来显示items的工具提示，但这个没有显示。

我究竟做错了什么 ？

item.id

我也尝试绑定div而不是td，遗憾的是它也不起作用。

id

Answer 1

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

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

MDL和Vue不能很好地融合在一起;您将不得不在代码中手动告诉MDL任何动态DOM更改，例如：

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>

。

---

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

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

：

upgradeElement

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是否可以在同一个元素上被多次调用，并且updateElement可能会完全用其他东西替换该元素，而这些东西真的不会与Vue一起玩，但是你明白了。