Develop Reference

Vue watcher executed before the new data is bound?

I am using this code:
var vueApp = new Vue({
el: '#app',
data: {
modalKanji: {}
},
methods: {
showModalKanji(character) {
sendAjax('GET', '/api/Dictionary/GetKanji?character=' + character, function (res) { vueApp.modalKanji = JSON.parse(res); });
}
},
watch: {
'modalKanji': function (newData) {
setTimeout(function () {
uglipop({
class: 'modalKanji', //styling class for Modal
source: 'div',
content: 'divModalKanji'
});
}, 1000);
}
}
});
and I have an element that when clicked on, displays a popup with the kanji data inside:
<span #click="showModalKanji(kebChar)" style="cursor:pointer;>
{{kebChar}}
</span>
<div id="divModalKanji" style='display:none;'>
<div v-if="typeof(modalKanji.Result) !== 'undefined'">
{{ modalKanji.Result.literal }}
</div>
</div>
It works, but only when used with a setTimeout delay to "let the time for Vue to update its model"...if I remove the setTimeout so the code is called instantaneousely in the watch function, the popup data is always "1 iteration behind", it's showing the info of the previous kanji I clicked...
Is there a way for a watcher function to be called AFTER Vue has completed is binding with the new data?

I think you need nextTick, see Async-Update-Queue
watch: {
'modalKanji': function (newData) {
this.$nextTick(function () {
uglipop({
class: 'modalKanji', //styling class for Modal
source: 'div',
content: 'divModalKanji'
});
});
}
}

Vue.js global event not working

I've got
<component-one></component-one>
<component-two></component-two>
<component-three></component-three>
Component two contains component three.
Currently I emit an event in <component-one> that has to be caught in <component-three>.
In <component-one> I fire the event like this:
this.$bus.$emit('setSecondBanner', finalBanner);
Then in <component-three> I catch it like this:
mounted() {
this.$bus.$on('setSecondBanner', (banner) => {
alert('Caught');
this.banner = banner;
});
},
But the event is never caught!
I define the bus like this (in my core.js):
let eventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: () => { return eventBus; }
}
});
What could be wrong here? When I check vue-dev-tools I can see that the event has fired!

This is the working example for vue1.
Object.defineProperty(Vue.prototype, '$bus', {
get() {
return this.$root.bus;
}
});
Vue.component('third', {
template: `<div> Third : {{ data }} </div>`,
props:['data']
});
Vue.component('second', {
template: `<div>Second component <third :data="data"></third></div>`,
ready() {
this.$bus.$on('setSecondBanner', (event) => {
this.data = event.data;
});
},
data() {
return {
data: 'Defautl value in second'
}
}
});
Vue.component('first', {
template: `<div>{{ data }}</div>`,
ready() {
setInterval(() => {
this.$bus.$emit('setSecondBanner', {
data: 'Bus sending some data : '+new Date(),
});
}, 1000);
},
data() {
return {
data: 'Defautl value in first'
}
}
});
var bus = new Vue({});
new Vue({
el: '#app',
data: {
bus: bus
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
<div id="app">
<second></second>
<first></first>
</div>

Have you tried registering the listener in created instead of mounted?
Also, why define the bus with defineProperties and not simply:
Vue.prototype.$bus = new Vue();

Vue js listen default events with vm.$on

interesting to me it is possible to listen default event with vm.$on?Is it impossible then why?
This is my html
<div id="app">
<div #click="clickListener">dsdsd</div>
</div>
This is my script
let vm = new Vue({
el:"#app",
methods:{
clickListener()
{
console.log("called clickListener")
}
}
})
vm.$on('click',function(){
console.log("hello")
})

You need to emit an event you want to listen to first, use vm.$emit() like this:
let vm = new Vue({
el:"#app",
methods:{
clickListener() {
this.$emit('eventName', 'sample-value');
}
}
})
vm.$on('eventName', function(value){
console.log(value); // 'sample-value'
});
EDIT: try something like this:
const vm = new Vue({
el: '#app',
mounted() {
const app = document.getElementById('app');
app.addEventListener('click', (event) => {
this.$emit('click', event);
});
}
});
vm.$on('click', (event) => {
console.log('click', event);
});

Vuejs show/hide condition

Adding and removing dynamic items is functioning. I'm wanting to additionally show/hide elements under each. However, when I "show/hide" it toggles all. How can I call only the current index (toggle method?)
var app = new Vue({
el: '#app',
data: {
inputProject: [],
counter:0,
active : false
},
methods: {
addInput: function() {
this.inputProject.push(this.counter);
this.counter++
},
removeInput: function(index) {
this.inputProject.splice(index,1);
},
toggle: function (index) {
this.active = !this.active;
}
}
})
Jsfiddle here: https://jsfiddle.net/rhgz83e2/30/

What you are doing wrong is that you change active property and it is reflected for all elements.
The solution is to assign active property for every object and use v-show directive.
<p v-show="elem.active" v-bind:id="elem.id">show {{push}}</p>
working fiddle.
var app = new Vue({
el: '#app',
data: {
inputProject: [],
counter:0
},
methods: {
addInput: function() {
this.inputProject.push({id:this.counter,active:false});
console.log(this.inputProject);
this.counter++
},
removeInput: function(index) {
this.inputProject.splice(index,1);
},
toggle: function (index) {
var item= this.inputProject.filter(a=>a.id==index)[0];
item.active=!item.active;
}
}
})

Run component method on load vue.js

hey I'm pretty new to Vue.js and I'm trying to accomplish what seems to be a simple thing but I'm, having trouble. Essentially, I need it so every time a component is loaded into the DOM, one of it's methods fire. Here is my current code, I've tried to use v-on:load but it doesn't seem to work.
Vue.component('graph', {
props:['graphId','graphData'],
template: '<canvas v-on:load="{{populateGraph()}}"></canvas>',
methods: {
initGraph: function () {
var settlementBalanceBarChart = new Chart(this.graphId, {
type: "bar",
data: settlementBalanceBarData,
options: settlementBalanceBarOptions
});
},
//this is the function I would like to run
populateGraph: function () {
alert('{{graphId}}');
}
}
});
var vm = new Vue({
el: "#app",
mounted: function(){
}
});
The same code functions fine if I use the v-on:click event

There are instance lifecycle hooks that you can use for that. For example:
Vue.component('graph', {
props:['graphId','graphData'],
template: '<canvas></canvas>',
created: function () {
alert('{{graphId}}');
},
methods: {}
});

You have to call the function prefixed by "this" as following:
var data =
{
cashiers: []
}
var vm = new Vue({
el: '#app',
data: data,
created: function () {
this.getCashiers();
},
methods: {
getCashiers: function () {
vm.cashiers = [];
}
}
});