vue.js 中的材质选择初始化

Question

我正在使用带有 Material Design Bootstrap (mdb) - http://mdbootstrap.com/javascript/material-select/ 的 vue.js 构建一个应用程序。根据文档，要使用select 样式，我需要通过以下方式覆盖标准select：

$(document).ready(function() {
  $('.mdb-select').material_select();
});

但是，我不确定将上述代码放在我的 vue.js 组件中的什么位置。我试着把它放在我的create 方法中：

<template>

    <select class="mdb-select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>

</template>

<script>

module.exports = {

  created: function () {
    $('.mdb-select').material_select();
  },

}

</script>

但是，我不断收到错误 Uncaught TypeError: $(...).material_select is not a function。

有人知道我应该在哪里执行初始化吗？

提前致谢！

Answer 1

lifecycle documentation 说：

创建

在创建实例后同步调用。在这个阶段， 实例已完成处理选项，这意味着以下内容 已设置：数据观察、计算属性、方法、 监视/事件回调。但是，DOM 编译还没有开始， 并且$el 属性将不可用。

您需要已创建 DOM 元素，因此您需要 ready 阶段。此外，您应该使用$(this.$el).find('.mdb-select') 将您的选择限制为当前元素。