在 Vue.js 中初始化物化元素

Posted 2023-02-22

【中文标题】在 Vue.js 中初始化物化元素

【英文标题】：Initializing materialize elements in Vue.js

【发布时间】：2017-06-07 07:10:59

【问题描述】：

如何在 Vue.js 中初始化 Materialise 的 select 或 modal 元素？当我在准备好的文档中添加以下代码时，元素不起作用。

<script> 

$(document).ready(function() 
  $('.modal-trigger').leanModal('open');
  $('select').material_select();
);

//Vue.js code here...   
 
</script> 

【问题讨论】：

把这个jQuery代码放到mounted()钩子里。

【参考方案1】：

您可以尝试在 Vue 的 lifecycle hooks 之一中调用此代码（请参阅 this diagram 以了解它们的确切执行位置），您可能想要使用 mounted。

但请记住，这并不是真正的防弹解决方案。 Vue 以后可能会以不同的方式操作 DOM，因此不一定与 Materialize 兼容。在这些情况下，最好的解决方案始终是找到您尝试使用的组件的特定于框架的实现，例如Vue Material.