[Vuejs]-Vue scope fresh

by

0👍

✅

The easiest solution to your problem is to mount your vue instance to the element after it has been injected by jquery. This is done by specifying it in the vue constructor with the el option. Or by using $mount

It is hard to get jquery (the html parts of it) to run smootly with vue.js, I would suggest going vue all the way. One easy approach is to load all vue templates at once and then only change the data.

👤Olof Drevin

0👍

Does vue has function like angular scope.apply?

As it says here, Vue performs DOM updates asynchronously. Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop. In the next event loop “tick”, Vue flushes the queue and performs the actual work.

In order to wait until Vue.js has finished updating the DOM after a data change, you can use Vue.nextTick(callback) immediately after the data is changed. The callback will be called after the DOM has been updated, which is similar to AngularJS where you wrap the code in $apply() and starts a $digest cycle.

Code example:

HTML

<div id="example">{{ message }}</div>

JS

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // change data
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

Why your code did not work can be diagnosed after looking at the code only.

👤Saurabh

Leave a comment