Question

我有一个使用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>

Answer 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不相配的东西，但你明白了。

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

1 个答案: