[Vuejs]-Jquery and Vue, .html() is not working

by

3👍

The reason the content doesn’t change is that, at the time you are executing your function, the component has not yet been rendered to the DOM. The DOM is not rendered until the mounted event.

Beyond that, however, you need to be careful when you are integrating jQuery and Vue, or avoid it altogether. The idiomatic Vue way to do this would be something like this.

console.clear()

new Vue({
  el: "#app",
  data:{
    message: "Hello"
  },
  created(){
    this.message = "ASERFDASRF"
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
 <div id="app">
   <div id="mainMenu"> {{message}} </div>
 </div>

There are a few times when you might mix jQuery and Vue (when you want to use a jQuery plugin for which there is no Vue counterpart, for example) but typically, there is almost always a way to do what you want without jQuery.

👤Bert

Leave a comment