Question

我在VueJS中相对较新。我在vueJS中使用tail.select插件时遇到问题

我已将插件导入到main.js import 'tail.select'

中

但是在我的tail.select(".select")上调用mounted时，会给我一个错误，提示Uncaught ReferenceError: tail is not defined。

HTML

<select class="form-control form-control-sm select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

脚本

export default {
  mounted(){
    flatpickr('.datepicker',{
      altFormat: "F j, Y",
      dateFormat: "Y-m-d",
    })
    tail.select(".select")
  }
}

Answer 1

Tail.Select具有称为reload的原型方法，其中包含以下功能：

        /*
         |  PUBLIC :: RELOAD SELECT
         |  @since  0.5.0 [0.3.0]
         */
        reload: function(){
            return this.remove().init();
        },

基本上调用了remove()和init()，这导致将数据重新填充为：

div.tail-select.no-classes.deselect是HTML文档中tail.select的容器。

要与Vue JS一起使用，请像以下示例一样将Vue updated method中的reload方法应用于Tail.Select的新实例，其中document.querySelectorAll用于定位所有{{1 }}根据唯一类名select在HTML文档中输入：

此功能激活尾巴。选择

js-select

在Vue更新事件上调用上一个功能

/**
* Activates Tail.select third party library for select options
*/
function activateTailSelect() {
    var sel = document.querySelectorAll('.js-select');
    var options = {
        deselect: true,
        search: true,
        width: "100%",
        openAbove: false
    };
    if (sel.length > 0) {
        sel.forEach(function (s) {
            var tSelect = tail.select(s, options);
            tSelect.reload(true);
        });
    }
}

如何在VueJS中使用tail.select

1 个答案: