Javascript 如何在引导模式下使用Vue.js呈现插件jQuery（作为工具提示和切换器）？

你好吗？我希望一切顺利

所以我在最前面有一个模板（纯HTML+CSS+jQuery），我正在Vue.js+Laravel中开发应用程序

我面临一个问题，当我必须使2个插件工作（一个是引导工具提示，另一个是引导模式）

我希望保持原样，因为我不希望更改模板=）

当我把它放在视图组件中时，它根本不工作！这是我的密码，如果有人能帮忙的话

OBS：我让上面的代码比真实的代码更干净，我正在使用我认为没有问题的VUEIFY

按钮触发模式

<a href="#" data-toggle="modal" data-target="#sources-modal">My Modal</a>

我的模式代码

<template>

  <!-- Source -->
  <div id="sources-modal" class="modal fade" style="display: none;">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Sources</h4>
        </div>
        <div class="modal-body">
          <div class="row p-10">
            <div class="col-md-6 m_md_bottom_15">
              <span class="waves-effect btn btn-warning" data-toggle="tooltip" data-original-title="Refresh" @click="fetchRecordList()"><i class="fa fa-refresh"></i></span>
            </div>
          </div>
          <div class="over_auto" v-el:data-grid>
            <table class="table table-striped table-bordered m-0">
              <thead>
                <tr>
                  <th class="w_50">
                    <input @click="selectAll()" v-model="allSelected" type="checkbox">
                  </th>
                  <th class="th_sort" @click="sort('name')" :class="isSortedColumn('name')">Name</th>
                  <th class="t_center th_sort w_100" @click="sort('active')" :class="isSortedColumn('active')">Active</th>
                  <th class="t_center w_100">Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="r in list | filterBy tableFilter | orderBy sortProperty sortDirection" track-by="$index">
                  <td>
                    <input type="checkbox" v-model="selected" value="{{ r.id }}">
                  </td>
                  <td>{{ r.name }}</td>
                  <td class="t_center">
                    <input type="checkbox" data-plugin="switchery" data-color="#5fbeaa" data-size="small" v-model="r.active" />
                  </td>
                  <td class="t_center">
                    <span class="waves-effect btn btn-warning btn-xs" data-toggle="tooltip" title="Edit" @click="fillForm(r)"><i class="fa-fw fa fa-pencil"></i></span>
                    <span class="waves-effect btn btn-danger btn-xs" data-toggle="tooltip" title="Delete" @click="deleteRecord(r)"><i class="fa-fw fa fa-times"></i></span>
                  </td>
                </tr>
                <tr v-show="!list.length">
                  <td class="t_center" colspan="4">No records found</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

来源
名称
活跃的
行动
{{r.name}}
没有发现任何记录

在这里，我从模式中提取了工具提示和切换代码，以便更轻松地显示它

<input type="checkbox" data-plugin="switchery" data-color="#5fbeaa" data-size="small" v-model="r.active" />
<span class="waves-effect btn btn-warning" data-toggle="tooltip" data-original-title="Refresh" @click="fetchRecordList()"><i class="fa fa-refresh"></i></span>

有人知道怎么帮我吗

---

提前谢谢

没有人！！哈哈哈哈哈哈，现在我已经学会了如何更好地使用view，我将分享我的解决方案，试图帮助别人

只是做了两个指令，使它的工作

关于切换器 我放弃了这个jquery插件，而是使用我自己的I组件！你可以在这篇文章上结帐

关于工具提示

import Vue from 'vue';

Vue.directive('plTooltip', {
  params: [
    'animation',
    'container',
    'html',
    'placement',
    'trigger',
  ],

  bind: function() {
    $(this.el).tooltip({
      animation: this.params.animation || true,
      container: this.params.container || false,
      html: this.params.html || false,
      placement: this.params.placement || 'top',
      title: this.vm.$t(this.expression) || '',
      trigger: this.params.trigger || 'hover focus',
    });
  },
  unbind: function() {
    $(this.el).tooltip('destroy');
  }
});

---

我希望它能帮助别人

没有人！！哈哈哈哈哈哈，现在我已经学会了如何更好地使用view，我将分享我的解决方案，试图帮助别人

只是做了两个指令，使它的工作

关于切换器 我放弃了这个jquery插件，而是使用我自己的I组件！你可以在这篇文章上结帐

关于工具提示

import Vue from 'vue';

Vue.directive('plTooltip', {
  params: [
    'animation',
    'container',
    'html',
    'placement',
    'trigger',
  ],

  bind: function() {
    $(this.el).tooltip({
      animation: this.params.animation || true,
      container: this.params.container || false,
      html: this.params.html || false,
      placement: this.params.placement || 'top',
      title: this.vm.$t(this.expression) || '',
      trigger: this.params.trigger || 'hover focus',
    });
  },
  unbind: function() {
    $(this.el).tooltip('destroy');
  }
});

我希望它能帮助别人