javascript - vue.js 中的 Material 选择初始化

Question

我正在使用 vue.js 和 Material Design Bootstrap (mdb) 构建一个应用程序 - http://mdbootstrap.com/javascript/material-select/ 。根据文档，要使用 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说:

created

Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, DOM compilation has not been started, and the $el property will not be available yet.

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