Wie man Plugins jQuery (als Tooltip und Switchery) mit Vue.js auf einem Bootstrap Modal rendern kann?

Question

Wie geht es dir? Ich hoffe es gut!

Also ich habe eine Vorlage bei ThemeForest (reines HTML + CSS + jQuery) und ich entwickle App in Vue.js + Laravel.

Ich stehe vor einem Problem, wenn ich zwei Plugins arbeiten muss (eines ist der Bootstrap Tooltip und andere Switchery) in einem Bootstrap Modal.

würde Ich mag es halten, wie es da ist, würde ich die Vorlage die Änderung nicht gefällt =)

Wenn ich es in einem View Component es einfach nicht funktioniert! Da ist mein Code, wenn jemand helfen kann!

OBS: Ich mache den Code über ein bisschen sauberer als das echte und ich benutze VUEIFY, was ich denke, es ist kein Problem!

BUTTON THET TRIGGERS die modale

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

MY Modal CODE

<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> 

HIER EXTRAHIERT ICH DIE TOOLTIP UND SWITCHERY Code aus dem Modal zu zeigen easyer

<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> 

Jemand kann mir helfen?

Vielen Dank im Voraus!

Answer 1

Niemand !! hahahahaa Nun, da ich besser gelernt habe, mit der Sicht zu arbeiten, werde ich meine Lösung teilen und versuchen, jemandem zu helfen!

Habe gerade 2 Direktiven gemacht, damit es funktioniert!

Über Switchery Ich gab von diesem jquery plugin auf und tat von meiner eigenen I-Komponente! Sie können Wrapping Switchery in a Directive VueJS

Über Tooltip

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'); 
    } 
}); 

zu diesem Beitrag Kasse Ich hoffe, es hilft jemand!