CODEWITHSUNDEEP
vue.jssemantic-ui
Edgar Navasardyan
Edgar Navasardyan

Reputation: 4501

VueJS and JS for Semantic UI seem to be incompatible

I am using Django, Vue and Semantic UI in my project, and basically I found out that inside a div that is controlled by a Vue instance, advanced Semantic UI features such as popup tooltip with a header do not work. If I comment out the initialization of the vue instance, everything works fine.

$(function() {

  $('.button')
    .popup({
      on: 'hover'
    });
  
  // If you uncomment Vue instance initialization below, you do not see the button toolip
  
  //new Vue({
  //  el: '#vue-wrapper',
  //}) 
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.2.0/vue-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>

<div id="vue-wrapper">
  <div class="ui icon button" data-position="bottom right" data-title="Title " data-content="Content">
    <i class="add icon"></i>
  </div>
</div>

Since I have a Django project, I do not use npm. Any ideas ? Is there something fundametally wrong ?

Upvotes: 0

Views: 215

Answers (1)

charlycou
charlycou

Reputation: 1988

You shouldn't use JQuery to manipulate Vue.js components. Vue JS has its own representation of DOM elements (the virtual DOM) to avoid to analyze the entire DOM each time a change is made. So if you manipulate the DOM using jQueror the DOM API, the virtual DOM won't match the actual DOM and you will witness unexpected behaviour. However you can still use jQuery in Vue component to activate the behaviour of your popup after the component is mounted.

  

  
  new Vue({
    el: '#vue-wrapper',
    mounted() {
      $('.button').popup({on: 'hover'});
    }
  });
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.2.0/vue-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>

<div id="vue-wrapper">
  <div class="ui icon button" data-position="bottom right" data-title="Title " data-content="Content">
    <i class="add icon"></i>
  </div>
</div>

Upvotes: 1

Related Questions